划分为箭头形状

Question

是否有可能像箭一样塑造div？

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

形状应该看起来像

 ______________
|              \
|______________/

我用一些样品尝试了一点点,但我无法让它成为我想要的形状.正如您所看到的,可以构建更加困难的形状.

谁知道如何实现这一目标？

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)调整大小,并将ems用于其他大小.