Div 作为箭头形状，不使用内部其他元素

Question

是否可以将 div 塑造成箭头形状？

我已经看到了这个，但在大多数页面中它是用几个 div 构建的，我只想使用一个。

形状应该像

 ______________
|              \
|______________/

我用 some samples 尝试了一点点，但我无法让它成为我想要的形状。如您所见，可以构建更难的形状。

有人知道如何实现吗？

Answer 1

您需要两个 div 元素，一个是矩形元素，一个是三角形元素，据我所知，除了一张背景图片外别无他法。下面是如何得到一个指向右边的三角形：

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

您想只使用一个 div 的任何特定原因？

Answer 2

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

.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 那里偷了一些；不知道你可以用边框做这样的把戏。您也可以使用 font-size: (basesize) 调整大小，并使用 ems 调整其他大小。

Div 作为箭头形状，不使用内部其他元素

Div as arrow shape without using other elements inside

html

css

css-shapes