箭头盒子与CSS

Question

我该如何在CSS中制作这个盒子？

我看过一些教如何创建带箭头的盒子的教程，但是，在我的情况下，这些教程都不适用。

- Nesta

---

这里有一个可能会让你开始的选择：http://cssarrowplease.com 祝你好运！ - David Taiaroa

以下是我最喜欢的之一。这个网站使用单个元素在 CSS 中构建了许多可能的形状：- http://css-tricks.com/examples/ShapesOfCSS/ - PSL

哇，这个要加入我的书签了！ - Hristo

Answer 1

我使用一个<div>元素，利用:before和:after伪元素（浏览器支持）来创建带有1像素边框的元素。主矩形具有常规的1像素边框，但三角形元素实际上是2个三角形，其中一个比另一个更暗。

较浅的三角形位于较暗的三角形上方，这样可以将其隐藏，并稍微向左移动以显示在其下方的较暗的三角形。最终的幻觉是三角形本身有一个1像素的深色边框。

这里有一个类似问题的问题：

如何只使用纯 CSS 创建“提示尾巴”？

其中一个答案实际上有一个很好的解释，说明了如何实现这种三角形效果：

https://dev59.com/LW035IYBdhLWcg3wGMHa#5623150

此外，这是一个关于边框的所有花式用法的优秀参考资料（感谢PSCoder）：

• http://css-tricks.com/examples/ShapesOfCSS/

... 这里有一个很棒的CSS生成器（感谢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>

- Hristo

---

惊人的解释！非常感谢你！ - Nesta

随时可以！很高兴能帮忙 :) - Hristo

Answer 2

这里是我创建的解决方案。

有两种简单的方法来实现此功能。第一种效率较低的方法是使用2个元素。我利用了:after伪元素。我对:after使用了position:absolute，原因有两个。

1. 你可以把元素放在需要的位置。
2. 它可以防止三角形的末端被切断。

创建三角形的关键是使用border属性。你有两个颜色设置为transparent的边框。这两个边框与你想要前往的方向相反。所以，如果你想制作一个右三角形，则使用top和bottom。给箭头赋予形状的是最后一个边框。它也朝相反的方向。所以对于一个右三角形，你将使用具有颜色的border-left。为了使其达到正确的高度，必须执行所需框的高度的一半。

- Cody Guldner

Answer 3

SVG是创建这种形状的推荐方法。它提供了简单性和可伸缩性。

我们可以使用SVG的

- Mohammad Usman