不使用内部元素如何将div变成箭头形状？

Question

能否将 div 塑造成箭头形状？

我已经看到过这种效果，但大多数页面都是通过多个 div 构建的，而我只想使用一个 div。

箭头应该长这样

 ______________
|              \
|______________/

我尝试使用一些示例进行了测试，但是我无法得到我想要的形状。而且，正如您所看到的，还可以构建更复杂的形状。

有人知道如何实现吗？

- Dwza

---

矩形 + 直角三角形 - Cristian Olaru

或者你可能喜欢这个：http://cssarrowplease.com/ - Cristian Olaru

如果有帮助的话，您还可以查看我之前的答案：http://stackoverflow.com/questions/15298723/css3-menu-border-rightarrow-effect/15302449#15302449 - MMachinegun

Answer 1

明白了。 （经过一些工作）

.block:after {
  color: black;
  border-left: 13px solid;
  border-top: 13px solid transparent;
  border-bottom: 13px solid transparent;
  display: inline-block;
  content: '';
  position: absolute;
  right: -13px;
}
.block {
  background-color: black;
  width: 100px;
  height: 26px;
  display: inline-block;
  position: relative;
}

<div class="block"></div>

从Tom Toms那里借鉴了一些内容；不知道你可以用边框做这样的花样。你还可以使用em为其他大小设置可调整大小，基础大小使用font-size: (basesize)。

- Katana314

---

看起来像我想要的:D 非常感谢..现在我必须尝试将它放到我的li而不是div上，然后一切都很好:D - Dwza

你说的“transition”是什么意思？ - Dwza

在您喜欢的CSS参考网站上查找过渡属性（我最喜欢的是developer.mozilla.org）。它基本上指定了：“当这个CSS属性从一个数字变化到另一个数字时，根据一定的时间值逐渐改变所有中间值的数字”。它是CSS的两种动画形式之一，通常更适合UI交互。 - Katana314

Answer 2

你需要两个

元素，一个矩形和一个三角形，除非使用背景图片，否则没有其他选择。以下是如何获得指向右侧的三角形:

.triangle {
  color: black;
  border-left: 13px solid;
  border-top: 13px solid transparent;
  border-bottom: 13px solid transparent;
}

你为什么要只使用一个 div 元素？是否有特定原因？

- Tom Tom

---

是的，因为它实际上是一个li元素，而“箭头”应该在鼠标悬停时显示。所以实际上li的背景就是箭头。在这种情况下，我只能使用一个^^ - Dwza

如果你决定使用我的示例，你可以尝试在“right”属性上放置一个过渡属性，这样它在悬停期间从0到-13px。这可能是使其更加平滑的简单方法。 - Katana314

我所做的是在li元素内添加一个绝对定位的span，它将成为三角形。li元素是矩形，定义了背景和颜色，在悬停时切换。由于span是子元素，它的颜色也会改变，因此不需要使用JavaScript。 - Tom Tom