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

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。您可以使用 :after 元素来实现同样的效果。

在父元素上使用 overflow:hidden 并旋转后元素。

阴影可用于双边框。

这是一个工作示例。

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

<div id="sample">

</div>

Answer 2

要达到parent div的效果，需要设置为相对的，然后设置溢出隐藏。让其余的 child div 将不可见。

之后你的 child div 使用变换来旋转元素。

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

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

Diagonal overlay on background image with double border

html

css

css-shapes