css - 具有切出边缘、边框和透明背景的 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()属性来改变元素的一个或两个角度。

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

您还可以为形状提供所需的边框，（参见以下演示）：

演示

输出 ：

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

您可以仅使用一个元素创建该形状，具有简单transforms和overflow: hidden;属性

您可以在另一个元素中添加内容：

body {
    background: url(http://i.imgur.com/RT7XR3C.jpg);
    background-size: cover;
}
div {
    height: 200px;
    width: 300px;
    margin: 40px auto;
    overflow: hidden;
    position: relative;
}
div:before {
    content: '';
    position: absolute;
    left: -58px; /*-half buffer -left border*/
    height: 188px;
    width: 400px;
    background: rgba(30, 30, 30, 0.8);
    -webkit-transform: skewX(45deg);
    -moz-transform: skewX(45deg);
    transform: skewX(45deg);
    border-left: 8px solid #222;
    border-right: 8px solid #222;
    border-top: 6px solid #222;
    border-bottom: 6px solid #222;
}
div:after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    height: 157px;
    width: 6px;
    background: #222;
    box-shadow:0 0 0 0 #222, 294px 43px 0 0 #222;
}

<div></div>

小提琴

输出：

Answer 3

不幸的是，您不能将伪元素添加到伪元素（即: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 编码。

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

Answer 4

好吧，我认为您需要使用多个元素..我可以用三个元素和 2 个伪元素来实现那种形状.. 在这里看看http://codepen.io/zwongso/pen/vgxdB

它的形状与您的图像不完全相同，但您应该明白......要获得那个边框会有点棘手......

我想知道是否有人有更好的解决方案..仅出于演示目的而有 2 个空元素有点不符合语义..

Answer 5

SVG 背景可能是一个很好的解决方案，尽管您可能会遇到一些支持问题。请参阅我何时可以在 CSS 背景中使用... SVG。此外，它们很难正常工作。如果您确实使用 SVG 背景，请务必将其作为数据 URI 嵌入到您的 CSS 中（参见小提琴，同时注意上述小提琴中的警告：-p）。

Answer 6

借助 CSS3，您可以使用它border-image来实现这一点。我在这里使用 inline-svg，但任何图像都可以：

body {
  background: url(http://i.imgur.com/RT7XR3C.jpg);
  background-size: cover;
}
.fancy-box {
  border-width: 50px;
  border-image: url('data:image/svg+xml,<svg width="300" height="300" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg"><polygon stroke="rgba(29, 30, 35, 0.9)" stroke-width="6" fill="rgba(44, 44, 48, 0.9)" points="5,5 255,5 295,45 295,295 45,295 5,255 5,5"/></svg>') 50 50 repeat;
  background: rgba(44, 44, 48, 0.9);
  background-clip: content-box;
  /* other styling */
  color: #D7DBE1;
  text-align: justify;
  font-family: sans-serif;
  width: 400px;
  margin: 0 auto;
}

<div class="fancy-box">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus nec interdum velit. Morbi quis leo ac ipsum volutpat imperdiet. Sed feugiat posuere nisl sit amet luctus.
</div>