Css双箭头

Question

我想做的事情的例子：

我正在尝试创建一个更像双箭头的箭头。我的目标是为它准备一个课程，但我已经尝试了我所知道的并且它不起作用。

如果有人能指引我走向正确的话

.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/

谢谢

Answer 1

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

.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>

Answer 2

或者，将初始border属性值应用于伪元素，如下面嵌入的代码段所示。

代码段示范：

.wrapper{
  width: 250px;
  height: 150px;
  background:black;
}
.arrow {
  height: 95px;
  position: relative; /* required */
}
.arrow:before, .arrow:after {
  content: "";
  position: absolute;
  left: 0;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 37.5px 0 37.5px 40px;
  border-color: transparent transparent transparent rgba(0, 123, 255, 0.7);
}
.arrow:after {  
  bottom: 0;
}
.arrow:before {
  top: 0;
}

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

Updated JSFiddle