箭头框与CSS

如何在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)：

> http://cssarrowplease.com/

无论如何，这里是相应的代码：

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

原文地址：https://www.jb51.cc/css/219933.html