CSS - code

CSS code

倾斜按钮

<style>button{width:180px;height:80px;background:#409eff;border:none;outline:none;display:block;margin:0 auto;color:#fff;font-size:18px;border-radius:15px 0;position:relative;transform:skew(-20deg);}button::before{position:absolute;content:'';width:20px;height:20px;background:#409eff;background:radial-gradient(circle at 0 0,transparent 0 20px,#409eff 21px);bottom:0;left:-19px;}button::after{position:absolute;content:'';width:20px;height:20px;background:#409eff;background:radial-gradient(circle at 100% 100%,transparent 0 20px,#409eff 21px);top:0;right:-19px;}button span{/* 行盒不支持变形 */display:block;transform:skew(20deg);}</style><button><span>倾斜按钮</span></button>