在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;
}

这是一个例子。