javascript - 如何在 CSS 中使用 div 制作尖箭头

Question

如何在 CSS 中制作尖箭头？不仅仅是一个三 Angular 形，而是一个有柄的，就像从弓上射出的传统箭一样？

我试图通过创建一个 div 容器来做到这一点，其中包含左右两个容器。右侧将包含三 Angular 形，左侧将包含三个 div，其中心将被着色以创建主干。

这是我的代码:

HTML:

<div id="main">
    <div class='arrowblock'>
        <div class='arrowright'></div>
        <div class='rectcontainer'>
            <div class='rect'></div>
            <div class='rect' style='background-color:green'>
            </div><div class='rect'>
            </div>
</div>

CSS:

.rectcontainer {
    height:30px;
    width:100px;
}

.arrowblock {
    width:130px;
    border-top: 15px solid transparent;
}
.arrowright {
float:right;
    border-top: 15px solid transparent;
    border-bottom: 15px solid transparent;
    border-left: 30px solid green;
}
.rect {
    width:100px;
    height:10px;
    background-color:transparent;
}

有没有更简单的方法来实现这一点？

Answer 1

这是一个带有纯 CSS 的箭头。 所有 浏览器都支持。我花了不到一分钟的时间来制作..

jsFiddle

.arrow {
  width: 120px;
}

.line {
  margin-top: 14px;
  width: 90px;
  background: blue;
  height: 10px;
  float: left;
}

.point {
  width: 0;
  height: 0;
  border-top: 20px solid transparent;
  border-bottom: 20px solid transparent;
  border-left: 30px solid blue;
  float: right;
}

<div class="arrow">
  <div class="line"></div>
  <div class="point"></div>
</div>