在css中创建带有三角形边框的div

Question

我正在尝试在左右两侧创建带箭头的div。没有背景，只有边界。像这样：

我可以使用:: before和:: after标签创建具有填充背景颜色的类似div。但是，只有边界是我无法实现的。它只能用css完成吗？

https://jsfiddle.net/1g16x8p7/1/

HTML：

<div class="wizard">
  <a class="item">
  </a>
</div>

的CSS：

.item {
    display: inline-block;
    padding: 15px;
    padding-left: 25px;

    /*default styles*/
    background-color: green;
    position: relative;
  }  


 .item:before,
.item:after {
      content: "";
      height: 0;
      width: 0;
      border-width: 15px 0 15px  10px;
      border-style: solid;

      position: absolute;
      left: 100%;
      top: 0;
    }


.item:before {
          border-color: transparent transparent transparent white;
        left: 0;  
      }


.item:after {
        border-color: transparent transparent transparent green;  
      }

Answer 1

您可以::before和::after在两个相邻边（例如顶部和右边）上使用边框，然后使用transform: rotate和position: absolute来创建左右部分，例如

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

.arrow {
  height: 75px;
  width: 200px;
  border-top: 4px solid black;
  border-bottom: 4px solid black;
  position: relative;
}
.arrow::before, .arrow::after {
  content: "";
  border-top: 4px solid black;
  border-right: 4px solid black;
  height: 55px;
  width: 55px;
  position: absolute;
  transform: rotate(45deg);

}

.arrow::before {
  top: 8px;
  left: -30px;
}

.arrow::after {
  top: 8px;
  right: -30px;
}

这是an example。