css - 带有 CSS 的箭头框

Question

如何在 CSS 中制作这个框？

我看过一些教如何创建带有箭头的框的教程，但是，就我而言，这些教程都不适合。

Answer 1

我用周围的 1px 边框创建了你的元素。我正在使用一个 <div>元素并利用 :before and :after pseudo-elements (browser-support)。主矩形有一个常规的 1px 边框，但三 Angular 形元素基本上是 2 个三 Angular 形，一个比另一个暗。

较亮的三 Angular 形位于较暗的三 Angular 形之上，具有隐藏它的效果，并稍微向左移动以显示下方的较暗三 Angular 形。由此产生的错觉是三 Angular 形本身有一个 1px 的深色边框。

这是一个提出类似问题的问题:

How can I create a "tooltip tail" using pure CSS?

其中一个答案实际上对如何实现这种三 Angular 形效果有很好的解释:

https://stackoverflow.com/a/5623150/196921

此外，对于您可以使用边框 (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>