css - 在css中创建带有三 Angular 形边框的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 .