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

概述我正在尝试在CSS中创建这样的图像. 我有以下代码. #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); p 我正在尝试在CSS中创建这样的图像.

我有以下代码.

#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;  }#overlay {  height: 300px;  wIDth: 100px;  background: #444;  border-left: 3px solID green;  position: absolute;  right: -20px;  }

<div ID="sample">  <div ID="overlay">  </div></div>

我可以单独使用CSS制作这样的结构吗？

解决方法 您无需使用叠加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,1);  -moz-Box-shadow: -6px 0px 0px 0px rgba(68,1);  Box-shadow: -4px 0px 0px 0px rgba(68,1);}

<div ID="sample"></div>

总结

以上是内存溢出为你收集整理的html-带有双边框的背景图像上的对角线覆盖全部内容，希望文章能够帮你解决html-带有双边框的背景图像上的对角线覆盖所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。