纯css实现卡牌小标签
效果图
代码部分
话不多说，直接上代码！
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>卡牌标签</title>
<style>/* 图片框 */
.box1{
width: 300px;
height: 400px;
background-color: aquamarine;
margin: 50px auto;
position: relative;
}
/* 标签主体部分 */
.span1{
display: inline-block;
width: 110px;
height: 30px;
background-color: rgb(0, 119, 255);
line-height: 30px;
text-align: center;
color: white;
border-radius: 0 15px 15px 0;
position: absolute;
bottom: 0px;
}
/* 标签转弯处阴影部分 */
.span2{
display: inline-block;
width: 12px;
height: 6px;
background-color: rgb(0, 87, 186);
border-radius: 50%;
position: absolute;
bottom: 30px;
z-index: -10;
left: -4px;
}
/* 标签转弯处 */
.span3{
display: inline-block;
width: 12px;
height: 33px;
background-color: rgb(0, 119, 255);
border-radius: 0 0 0 6px;
position: absolute;
bottom: 0px;
left: -4px;
z-index: -15;
}</style>
</head>
<body>
<div class="box1">
<span class="span1">今日可预约</span>
<span class="span2"></span>
<span class="span3"></span>
</div>
</body>
</html>
补充
把整个标签拆分成css能够实现的小部分，通过层叠在一起实现最终的效果。
再看一下整体效果。
