html - CSS双箭头

我想正确执行的示例：



我正在尝试创建更像双箭头的箭头。我的目标是为此上一堂课，但是我尝试了我所知道的并且没有用。

如果有人能指引我正确的方向，那将是很棒的

.wrapper{
  width: 250px;
  height: 150px;
  background:black;
}
.arrow1{
  left:0px;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 37.5px 0 37.5px 75px;
  border-color: transparent transparent transparent #007bff;
}

<div class="wrapper">
    <div class="arrow1"></div>
</div>

https://jsfiddle.net/7mfquq2y/

谢谢

最佳答案

您可以这样考虑伪元素和旋转：

.arrow1 {
  height: 120px;
  width: 100px;
  overflow: hidden;
  position: relative;
}

.arrow1:before,
.arrow1:after {
  content: " ";
  position: absolute;
  width: 60px;
  height: 60px;
  background: rgba(0, 128, 0, 0.6);
  transform: rotate(45deg);
  left: -30px;
  top: 40px;
}

.arrow1:after {
  top: 20px;
}

<div class="arrow1"></div>