Html 双边框背景图像的对角线叠加

我正在尝试在CSS中创建这样的图像

我有以下代码

#示例{
高度：200px；
宽度：300px；
背景：url(https://placeholdit.imgix.net/~text？txtsize=28&bg=0099ff&txtclr=ffffff&txt=300%C3%97300&w=300&h=300&fm=png）；
位置：相对位置；
}
#覆盖层{
高度：300px；
宽度：100px；
背景：#444；
左边框：3倍纯绿；
位置：绝对位置；
右：-20px；
}

---

您不需要使用覆盖div。您可以使用

：after

元素来实现相同的功能

在父元素上使用

溢出：隐藏
，并旋转after元素

阴影可以用于双边框

下面是一个工作示例


#示例{
高度：200px；
宽度：300px；
背景：url(https://placeholdit.imgix.net/~text？txtsize=28&bg=0099ff&txtclr=ffffff&txt=300%C3%97300&w=300&h=300&fm=png）；
位置：相对位置；
溢出：隐藏；
}
#样本：之后{
高度：300px；
宽度：100px；
内容：“；
背景：#444；
左边框：3倍纯绿；
位置：绝对位置；
右：-20px；
变换：旋转（25度）；
-网络工具包盒阴影：-6px 0px 0px 0px rgba（68,68,68,1）；
-moz盒阴影：-6px 0px 0px 0px rgba（68,68,68,1）；
盒影：-4px0px0px0pxrgba（68,68,68,1）；
}
要获得结果，需要将parent div设置为relative，然后将其设置为overflow hidden。让子div的其余部分不可见

之后，您的子div使用transform旋转元素

HTML


<div id="sample">

<div id="overlay">
  </div>
</div>

#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;

}
#overlay {
  height: 300px;
  width: 100px;
  background: #444;
  border-left: 3px solid green;
  position: absolute;
  right: -20px;
  transform: rotate(25deg);

}