css样式美化 button斜切角
2年前
超过1013天
温馨提示
本文最后更新于2022年02月12日，已超过1013天没有更新，若内容或图片失效，请留言反馈。
CSS代码
.rantangle {
width:100%;
box-sizing:border-box;
text-align:center;
}
.rantangle button {
width:20%;
border:0;
border-radius:5px;
color:#FFF;
padding:10px 0;
text-align:center;
text-decoration:none;
cursor:pointer;
}
.btnleft {
background:linear-gradient(-59deg,transparent 21px,#d12826 0) top right;
background-size:100% 100%;
background-repeat:no-repeat;
}
.btnright {
background:linear-gradient(120deg,transparent 21px,#04A95B 0) top left;
background-size:100% 100%;
background-repeat:no-repeat;
margin-left:-25px;
}
html代码
<div class="rantangle">
<button type="button" class="btnleft">按钮1</button>
<button type="button" class="btnright">按钮2</button>
</div>
截图
0 赞
or 打赏
喜欢就打赏一点
