button
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>test</title>
<style>
.btn {
width: 100px;
text-align: center;
height: 50px;
line-height: 50px;
background: #000;
color: #fff;
position: relative;
}
.btn:after {
position: absolute;
content: '';
width: 30px;
height: 30px;
background: #fff;
top: 10px;
right: -15px;
border-radius: 100%;
}
.sawtooth {
height: 50px;
background: border-box radial-gradient(transparent 0, transparent 6px, #e24141 4px), padding-box #e24141;
background-size: 20px 20px;
/* background-position: 0px 0px; */
/* border-left: 0px solid transparent; */
/* border-right: 10px solid transparent; */
position: relative;
border-bottom: 10px solid transparent;
}
.sawtooth:before {
content: ' ';
display: block;
/* 用相同的颜色覆盖 */
background-color: #e24141;
/* 绝对定位，遮住中间所有的洞，只保留边角的锯齿 */
position: absolute;
top: 0;
bottom: 0;
/* 为锯齿保留的距离 */
left: 10px;
right: 10px;
z-index: -1;
}
</style>
</head>
<body>
<div class="btn">
button
</div>
<div class="sawtooth"></div>
</body>
</html>
评论 (0)