html双背景,html-带有双边框的背景图像上的对角线覆盖

您无需使用叠加div.你可以使用：after元素来实现相同的功能.

使用overflow：隐藏在父级上并旋转after元素.

阴影可用于双边框.

这是一个有效的例子.

#sample {

height: 200px;

width: 300px;

background: url(https://placeholdit.imgix.net/~text?txtsize=28&bg=0099ff&txtclr=ffffff&txt=300%C3%97300&w=300&h=300&fm=png);

position: relative;

overflow: hidden;

}

#sample:after {

height: 300px;

width: 100px;

content: " ";

background: #444;

border-left: 3px solid green;

position: absolute;

right: -20px;

transform: rotate(25deg);

-webkit-box-shadow: -6px 0px 0px 0px rgba(68, 68, 68, 1);

-moz-box-shadow: -6px 0px 0px 0px rgba(68, 68, 68, 1);

box-shadow: -4px 0px 0px 0px rgba(68, 68, 68, 1);

}