CSS3 Ein Seitenrand Cut/Transform/Skew

Question

Hallo Ich möchte Step-Menü wie angehängtes Bild hier zu stilisieren. Wie kann ich das stilisieren? Hauptproblem ist der Rand auf der rechten Seite des Menüs.

Überprüfen Sie meine JSFiddle URL https://jsfiddle.net/hcx1pv8x/, ich habe andere Stil mit dreieckigen Rand-Effekt obwohl.

Mein HTML Inhalt hierfür ist:

<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

können Sie Code schreiben, wie unten

erwähnt

.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>