Div切边,边框和透明背景

Question

我一直试图弄清楚如何在CSS中制作一个自定义形状,在视觉上看起来像这样:

随着财产background:rgba(44, 44, 48, 0.9)和border:6px solid rgba(29, 30, 35, 0.9);

我的问题是我找不到一种方法来使右上角和左下角看起来像我提供的图像.在CSS-Tricks上尝试了CSS自定义形状的提示,但它似乎没有解决问题,因为它不具备背景.有任何想法吗？

Answer 1

如果您在3d中思考,则可以使用perspective和rotateX()属性仅更改元素的一个或两个角度.

这将允许您设置容器的伪元素的样式,以赋予它们所需的形状,并切出右上角和左下角.

您还可以为形状提供所需的边框(请参阅下面的演示):

DEMO

输出:

div {
  position: relative;
  width: 50%;
  height: 300px;
  margin: 10% auto;
  background: rgba(0, 0, 0, 0.7);
  border-top: 6px solid rgba(0, 0, 0, 0.8);
  border-bottom: 6px solid rgba(0, 0, 0, 0.8);
}
div:before,
div:after {
  content: '';
  position: absolute;
  top: -6px;
  width: 20%;
  height: 100%;
}
div:before {
  right: 100%;
  background: inherit;
  border-top: 6px solid rgba(0, 0, 0, 0.8);
  border-left: 6px solid rgba(0, 0, 0, 0.8);
  border-bottom: 6px solid rgba(0, 0, 0, 0.8);
  -webkit-transform-origin: 100% 0;
  transform-origin: 100% 0;
  -webkit-transform: perspective(1px) rotateY(-0.15deg);
  transform: perspective(1px) rotateY(-0.15deg);
}
div:after {
  left: 100%;
  border-top: 6px solid rgba(0, 0, 0, 0.8);
  border-right: 6px solid rgba(0, 0, 0, 0.8);
  border-bottom: 6px solid rgba(0, 0, 0, 0.8);
  border-left: none;
  background: inherit;
  -webkit-transform-origin: 0 100%;
  transform-origin: 0 100%;
  -webkit-transform: perspective(1px) rotateY(0.15deg);
  transform: perspective(1px) rotateY(0.15deg);
}

<div></div>

Answer 2

不幸的是，您不能将伪元素添加到伪元素中（即:after:after{} 不起作用） - 对于像您这样的复杂形状，您可能需要稍微作弊并依赖其子元素的伪元素。

<div class="fancy-box">
    <h2>Title</h2>
    <p>Content</p>
</div>

.fancy-box{/*container, top+bottom borders*/}
.fancy-box:before{/*left-top "square" corner*/}
.fancy-box:after{/*right-bottom "square" corner*/}
.fancy-box>p:before{/*left-bottom "dog ear" border*/}
.fancy-box>p:after{/*right-top "dog ear" border*/}
.fancy-box>h2:before{{/*left-bottom "dog ear" background*/}
.fancy-box>h2:after{/*right-top "dog ear" background*/}

再次，这个小提琴向您展示了它如何与纯色一起使用（相当好，尽管我不喜欢“较薄”的角度） - 但是当您应用 opacity 时，这会失败。你最好的方法可能是将“狗耳朵”制作成预渲染的半透明PNG，为了额外的信用，你可以对它们进行base64编码。

上面的“解决方案”是一个完整的语义恐怖 - 使用带有预渲染图形的多个背景可能会有更好的运气。