CSSで三角形の枠線を使ってdivを作成する

Question

左右に矢印のあるdivを作成しようとしています。背景なし、境界線のみ。このような何か：

私はタグの後に前と:: ::用いて充填背景色と類似した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です。