css样式美化 button斜切角
3年前
超过1165天
温馨提示
本文最后更新于2022年02月12日，已超过1165天没有更新，若内容或图片失效，请留言反馈。
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 打赏
喜欢就打赏一点
暂无评论，快来抢沙发
服务器服务器