html代码:
<body style="width: 100%;height: 100%;overflow-x: hidden;padding-top: 50px">
<div class="mrajoe-card">
<div class="mrajoe-card-label">
<h4>标签</h4>
</div>
</div>
</body>
CSS代码:
.mrajoe-card{
width: 300px;
min-height: 500px;
margin: 0 auto;
border-radius: 10px;
background-color: #eff2fb;
}
.mrajoe-card-label{
position: relative;
margin: 10px 0 5px -10px;
padding-top: 20px;
filter: drop-shadow(5px 6px 5px rgba(32,160,255,.3));
font-size: 0;
}
.mrajoe-card-label>h4{
display: inline-block;
margin: 0;
color: #fff;
background: linear-gradient(90deg, #3affd1, #47ff98 6px, #4aff34);
font-weight: 700;
font-size: 16px!important;
line-height: 40px;
height: 40px;
padding: 0 22px 0 34px;
border-top-left-radius: 5px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 1030px;
vertical-align: bottom;
}
.mrajoe-card-label:before{
content: "";
display: block;
position: absolute;
left: 0;
bottom: -10px;
border-left: 5px solid transparent;
border-bottom: 5px solid transparent;
border-right: 5px solid #4aff34;
border-top: 5px solid #4aff34;
transform-origin: bottom;
transform: scaleY(1);
}
.mrajoe-card-label:after{
content: "";
display: inline-block;
border-top: 20px solid #4aff34;
border-left: 20px solid #4aff34;
border-left-width: 8px;
border-right: 8px solid transparent;
border-bottom: 20px solid transparent;
vertical-align: bottom;
}
效果:
注意,在使用 :before和:after伪类给块元素设置内容时,需要设置当前块元素的font-size:0,然后设置内部元素的font-size大小,即可解决空白问题;
例如:注释如下代码:
再来看效果: