Hello,大家好,今天给大家推荐一个css的小样式 斜体按钮!是不是听起来很酷呢,让我们一起看看吧!
首先是html:
<button>斜体按钮</button>
接下来是css样式:
* {
margin: 0;
padding: 0;
text-align: center;
}
button {
width: 200px;
height: 80px;
color: white;
margin-top: 100px;
background-color: black;
font-size: 25px;
border-radius: 15px 0;
position: relative;
transform: skew(-30deg);
}
button::before{
content: '';
position: absolute;
width: 20px;
height: 20px;
background: radial-gradient(circle at 0 0, transparent, transparent 20px, black 20px);
bottom: 0;
left: -22px;
}
button::after{
content: '';
position: absolute;
width: 20px;
height: 20px;
background: radial-gradient(circle at 100% 100%, transparent, transparent 20px, black 20px);
top: 0;
right: -22px;
}
最后大家看下效果图展示: