css - 添加三 Angular 形 Angular 按钮 css

Question

我想复制这个:http://prntscr.com/k5wp2t我尝试使用此代码，但我需要帮助才能更好地设置它。

<div class="button">MAGGIORI INFORMAZIONI</div>

.button {
 position: relative;
 display: block;
 width: 120px;
 height: 50px;
 background: blue;
 }

.button:after{
 position: absolute;
 bottom: 0;
 height: 0;
 width: 0;
 left: 30%;
 border: 30px solid transparent;
 border-bottom-color: red;
 content: "";
 }

谢谢

Answer 1

请使用这个

.button {
position: relative;
display: block;
width: 120px;
height: 50px;
background: blue;
padding-right: 40px;
overflow: hidden;
color:#fff;
padding-left:30px;
line-height:22px;
 }

.button:after{
position: absolute;
bottom: 0;
height: 50px;
width: 30px;
right: -14px;
background: red;
content: "";
z-index: 1000;
transform: skew(-30deg);
 }

<div class="button">MAGGIORI INFORMAZIONI</div>