Question

是否可以像箭头一样塑造div？

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

形状应该看起来像

 ______________
|              \
|______________/

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

任何人都知道怎么做到这一点？

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>

从汤姆汤姆斯那里偷走了一些;不知道你可以用边界做那样的伎俩。您也可以使用font-size :( basesize）调整大小，并将em s用于其他大小。

Answer 2

你需要两个div个元素，一个矩形，一个三角形，除了背景图像，据我所知，没有办法。以下是如何获得指向右侧的三角形：

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

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

划分为箭头形状

2 个答案: