共计 902 个字符,预计需要花费 3 分钟才能阅读完成。
如图下图
html 代码
<div class="corner-box">
<div class="corner-top"></div>
<div class="corner-bottom"></div>
<p> 预警次数 TOP6 指标散布 </p>
</div>
css 代码
.corner-box {
float: left;
cursor: pointer;
user-select: none;
width: 190px;
height: 35px;
line-height: 35px;
font-size: 16px;
position: relative;
padding-left: 10px;
background-color: #ecf8ff;
@corner-width: 8px;
@corner-height: 8px;
@corner-border: 1px solid #43bafe;
@corner-fix: -4px;
.corner-base() {
content: '';
position: absolute;
width: @corner-width;
height: @corner-height;
border: @corner-border;
}
.corner-top {
&::before {.corner-base();
left: @corner-fix;
top: @corner-fix;
border-bottom: none;
border-right: none;
}
&::after {.corner-base();
right: @corner-fix;
top: @corner-fix;
border-bottom: none;
border-left: none;
}
}
.corner-bottom {
&::before {.corner-base();
left: @corner-fix;
bottom: @corner-fix;
border-top: none;
border-right: none;
}
&::after {.corner-base();
right: @corner-fix;
bottom: @corner-fix;
border-top: none;
border-left: none;
}
}
}
正文完