。使用属性
background:rgba(44, 44, 48, 0.9)和border:6px solid rgba(29, 30, 35, 0.9);。我的问题是我找不到一种方法使右上角和左下角的边框看起来像我提供的图片。我尝试了CSS-Tricks上的CSS自定义形状技巧，但它似乎无法解决该问题，因为它不能有背景。有什么想法吗？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);
transform-origin: 100% 0;
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;
transform-origin: 0 100%;
transform: perspective(1px) rotateY(0.15deg);
}<div></div>transform和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>输出：
很遗憾，您不能在伪元素中添加伪元素（即: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*/}
再次提醒，这个代码片展示了如何使用纯色（相当不错，但我不喜欢“细”的角度） - 但是当你应用透明度时，它会失败。最好的方法可能是将“狗耳朵”制成预渲染的半透明PNG图像，如果您想要额外的加分可以对它们进行base64编码。
上面的“解决方案”完全是语义恐怖 - 您可以尝试使用多个带有预渲染图形的背景来获得更好的效果。
嗯，我认为你需要使用不止一个元素。我可以用三个元素和 2 个伪元素差不多实现那个形状。在这里看一下 http://codepen.io/zwongso/pen/vgxdB。
虽然它不是与你的图片完全相同的形状，但你应该有了思路。要获得那个边框会有些棘手。
我想知道是否有更好的解决方案。为了呈现目的而有两个空元素有点不太符合语义。
SVG背景可能是一个不错的解决方案，尽管您可能会遇到一些支持问题。请参见在CSS背景中何时可以使用SVG。此外，它们很棘手，需要做得非常正确。如果您确实使用SVG背景，请务必将其嵌入CSS中作为数据URI（请参见fiddle，同时注意上述fiddle中的警告 :-p）。
使用CSS3，您可以使用border-image来实现此目的。我在这里使用了内联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>