CSS3片側ボーダーカット/変形/スキュー

Question

こんにちは、私はここに添付された画像のようなステップメニューをスタイライズしたいです。どのように私はこれを形式化することができますか？主な問題は、メニューの右側にある境界です。

は私も三角形の境界効果を持つ別のスタイルを作ってきた、私のJSFiddleのURL https://jsfiddle.net/hcx1pv8x/を確認してください。

このための私のHTMLコンテンツは、次のとおりです。

<div class="steps"> 
 
\t \t <div class="row"> 
 
\t \t \t <a href="#" class="col-lg-4 col-sm-4 col-xs-4 btn btn-default active">Step 1</a> 
 
\t \t \t <a href="#" class="col-lg-4 col-sm-4 col-xs-4 btn btn-default">Step 2</a> 
 
\t \t \t <a href="#" class="col-lg-4 col-sm-4 col-xs-4 btn btn-default">Step 3</a> 
 
\t \t </div> 
 
\t </div>

Answer 1

.btn.btn-default { 
 
    background: grey; 
 
    padding: 22px 10px; 
 
    border-radius: 0; 
 
    border: none; 
 
    box-shadow: none; 
 
    color: #fff; 
 
    text-transform: uppercase; 
 
    position:relative; 
 
} 
 
.btn.btn-default:after { 
 
    width: 0; 
 
    height: 0; 
 
    border-top: 65px solid grey; 
 
    border-right: 25px solid transparent; 
 
    content: ""; 
 
    top: 0; 
 
    position: absolute; 
 
    z-index: 1; 
 
    right: -24px; 
 
} 
 
.btn.btn-default:before { 
 
    width: 0; 
 
    height: 0; 
 
    border-top: 65px solid #000; 
 
    border-right: 25px solid transparent; 
 
    content: ""; 
 
    top: 0; 
 
    position: absolute; 
 
    z-index: 1; 
 
    right: -25px; 
 
} 
 

 
.steps .btn.btn-default:last-child:after,.steps .btn.btn-default:last-child:before{display:none;} 
 
.btn.btn-default:hover,.btn.btn-default:focus,.btn.btn-default:active,.btn.btn-default:active:focus{color:#fff;background:red;} 
 
.btn.btn-default.active:hover,.btn.btn-default.active:focus,default.active:active{color:#fff;background:red;} 
 

 
.steps { 
 
    border-top: 1px solid #000; 
 
    border-bottom: 1px solid #000; 
 
} 
 

 
.btn.btn-default.active { 
 
    background: red; 
 
    color:#fff; 
 
    box-shadow:none; 
 
} 
 
.btn.btn-default.active:after,.btn.btn-default:hover:after,.btn.btn-default:focus:after,.btn.btn-default:active:after,.btn.btn-default:active:focus:after{ 
 
    border-top: 65px solid red; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="steps"> 
 
\t \t <div class=""> 
 
\t \t \t <a href="#" class="col-lg-4 col-sm-4 col-xs-4 btn btn-default active">Step 1</a> 
 
\t \t \t <a href="#" class="col-lg-4 col-sm-4 col-xs-4 btn btn-default">Step 2 </a> 
 
\t \t \t <a href="#" class="col-lg-4 col-sm-4 col-xs-4 btn btn-default">Step 3 </a> 
 
\t \t </div> 
 
\t </div>