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

输出：

＆＃13;

＆＃13;

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

＆＃13;

<div></div>

＆＃13;

＆＃13;

＆＃13;

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>

<强> FIDDLE

<强>输出：

Answer 3

不幸的是，您不能将伪元素添加到伪元素（即:after:after{}将无效） - 使用与您类似的复杂形状，您可能需要cheat a little并依赖伪 - 其子女的元素。

<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*/}

再次，this fiddle向您展示它如何与纯色一起使用（相当好，虽然我不喜欢“更薄”的角度） - 但这会fail when you apply opacity。最好的做法可能就是将“狗耳朵”制成预先渲染的半透明PNG，以获得额外的功劳you could base64-encode them。

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

Answer 4

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

它的形状与你的形象不完全相同，但是你应该明白这个想法......要让那个边框变得有点棘手......

我想知道是否有人有更好的解决方案..有两个空元素只是为了演示目的而有点非语义..

Answer 5

SVG背景可能是一个很好的解决方案，尽管您可能会遇到一些支持问题。见When can I use… SVG in CSS backgrounds。此外，他们很难处理正常工作。如果你确实使用了SVG背景，那么一定要把它作为数据URI嵌入到你的CSS中（参见fiddle，在所说的小提琴中注意警告:-p）。

Answer 6

使用CSS3，您可以使用border-image来实现此目的。我在这里使用了inline-svg，但任何图像都可以使用：

＆＃13;

＆＃13;

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;