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

Question

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

查看我的 JSFiddle URL https://jsfiddle.net/hcx1pv8x/ ，不过我已经用三角形边框效果制作了不同的样式。

我的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>

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

CSS3 One Side Border Cut / Transform / Skew

css

css-transforms