在背景图象的对角覆盖物与双重边界

Question

我正在尝试在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制作这样的结构吗？

Answer 1

要实现结果，必须将父div设置为相对，然后将其设置为隐藏溢出。让剩下的孩子看不见。

之后你的孩子div使用transform来旋转元素。

HTML

<div id="sample">

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

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;
  overflow: hidden;

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

}

DEMO