如果我使用CSS，该如何换行？

Question

尝试创建箭头和线条，例如图像。

仅CSS就有可能吗？

使用SVG绘制会更好吗？

Answer 1

有很多方法可以实现，这是一种。

#funky-arrow {
  border-top: 1px solid #000;
  text-align: right;
  max-width: 210px;
}

#funky-arrow > div {
  border-bottom: 5px solid transparent;
  border-right: 5px solid #000;
  border-top: 5px solid transparent;
  display: inline-block;
  height: 0;
  position: relative;
  right: -6px;
  top: 18px;
  width: 0;
}

#funky-arrow:after {
  background-color: #000;
  content: "";
  display: inline-block;
  height: 1px;
  transform: rotate(-20deg);
  width: 80px;
}

<div id="funky-arrow">
  <div></div>
</div>