纯css实现带斜角的边框样式,是边框哦
展示效果
斜角优化前(百度上找到的方法)
斜角优化后(想了个花里胡哨的办法)
直接贴代码
// html
<a class="review_a">
占位(会被挡住)
<div>占位(这个显示)</div>
</a>
// css
.review_a{
padding-left: 22px;
padding-right: 22px;
line-height: 34px;
background-color: #FF4A22;
position: absolute;
overflow: hidden;
text-align: center;
color: #FF4A22;
font-weight: bold;
clip-path: polygon(
0 0,
0 100%,
calc(100% - 8px) 100%,
100% calc(100% - 13.856px),
100% 0,
);
&::after{
content: '';
position: absolute;
left: 50%;
top: 50%;
width: calc(100% - 4px);
height: calc(100% - 4px);
transform: translate(-50%,-50%);
background-color: #fff;
clip-path: polygon(
0 0,
0 100%,
calc(100% - 8px) 100%,
100% calc(100% - 13.856px),
100% 0,
);
}
>div{
position: absolute;
top: -1px;
z-index: 999;
color: #FF4A22;
font-weight: bold;
}
}
说明下原理
上面提到的,网上搜到的方法原理也很简单,clip-path把盒子切成设计稿上的样子,直接给border,加overflow:hidden。然后被切掉的地方不会有border展示出来,用伪元素写个边框条,旋转一下定位到对应的位置,就是第一张图的效果。
瑕疵在于: 这个样式浏览器渲染的时候没有那么精准,稍微有一点偏差,样式就看起来有尖角,作为一个完美主义+强迫症患者,我表示难以接受
我的优化:原理也很简单,代码在上面贴出来了。同样是先用clip-path把盒子切成设计稿上的样子,但是不给border。给个背景色(边框颜色),然后用居中定位一个伪元素,大小比父盒子小一点,也用同样的clip-path切一下,给个背景色(与大背景色相同,比如白色),遮住父级盒子中间的背景色,这样看起来就像是父级盒子有了边框,而且也不会有尖角突出来的情况。
a标签里的那个div,是为了展示边框里的文字内容,因为真正的文字内容被遮住了。
用css实现有个好处,就是当文字内容发生变化时,样式不会乱。而如果直接使用一张背景图来实现,就不能达到这个效果了。、
上班之余的一点小心得,如果能对大家有所帮助,我会觉得很开心。哈哈哈,年前最后一天班,也是第一次发文章,祝大家新年快乐~ 也希望武汉的疫情能早日解决~