css样式美化 button斜切角

网页前端
173 0

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>

截图

请输入图片描述

最后更新 2022-02-12
评论 ( 0 )
OωO
隐私评论