CSS3 一侧边框剪切/变换/倾斜

Question

你好，我想像这里的附图一样对步骤菜单进行风格化。我该如何风格化这个？主要问题是菜单右侧的边框。

检查我的 JSFiddle URL https://jsfiddle.net/hcx1pv8x/ , 不过我已经制作了不同风格的三 Angular 形边框效果。

我的 HTML 内容是:

<div class="steps">
		<div class="row">
			<a href="#" class="col-lg-4 col-sm-4 col-xs-4 btn btn-default active">Step 1</a>
			<a href="#" class="col-lg-4 col-sm-4 col-xs-4 btn btn-default">Step 2</a>
			<a href="#" class="col-lg-4 col-sm-4 col-xs-4 btn btn-default">Step 3</a>
		</div>
	</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">
		<div class="">
			<a href="#" class="col-lg-4 col-sm-4 col-xs-4 btn btn-default active">Step 1</a>
			<a href="#" class="col-lg-4 col-sm-4 col-xs-4 btn btn-default">Step 2 </a>
			<a href="#" class="col-lg-4 col-sm-4 col-xs-4 btn btn-default">Step 3 </a>
		</div>
	</div>