代码之家 › 专栏 › 技术社区 › user4095822

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

css-shapes css html

user4095822 · 技术社区 · 9 年前

我正在尝试用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创建这样的结构吗?

2 回复 | 直到 9 年前

Sooraj 9 年前

您不需要使用覆盖div。您可以使用 :after 元素以实现相同的效果。

使用 overflow:hidden 并旋转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);
}

<div id="sample">

</div>

Fiido93 9 年前

为了实现这个结果,需要将父div设置为相对的,然后将其设置为溢出隐藏。让其余的子div将是不可见的。

之后,子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