如何在CSS中使这个框？
我看过几个教程，教导如何用箭头创建框，但在我的情况下，这些教程都不适合。
解决方法
我用周围的1px边框创建了你的元素。我正在使用一个< div>并利用
:before and :after pseudo-elements(
browser-support)。主矩形具有一个常规的1px边框，但三角形元素本质上是2个三角形，一个比另一个更深。
较浅的三角形位于较深的三角形的顶部，具有隐藏的作用，并向左偏移以显示下方较暗的三角形。由此产生的错觉是三角形本身的1px暗边框。
这是一个问题，问一个类似的问题：
07002
其中一个答案实际上对如何实现这种三角效应有很好的解释：
07003
此外，这是您可以为边界所做的所有花哨的事情提供极好的参考(thanks to PSCoder)：
> http://css-tricks.com/examples/ShapesOfCSS/
…这里是一个甜蜜的css生成器(thanks to David Taiaroa)：
无论如何，这里是相应的代码：
#arrow {
width: 128px;
height: 100px;
background-color: #ccc;
border: 1px solid #999;
position: relative;
}
#arrow:after {
content: '';
position: absolute;
top: 0px;
left: 128px;
width: 0;
height: 0;
border: 50px solid transparent;
border-left: 12px solid #ccc;
}
#arrow:before {
content: '';
position: absolute;
top: 0px;
left: 129px;
width: 0;
height: 0;
border: 50px solid transparent;
border-left: 12px solid #999;
}
<div id="arrow"></div>
