html中一个div带一个尖尖,javascript – 如何在CSS中使用div创建一个尖箭头

如何在CSS中制作尖箭？不只是一个三角形而是一个带有杆的三角形,就像传统的箭头一样会被弓箭射出？

我试图通过创建一个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;

}

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