纯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实现有个好处，就是当文字内容发生变化时，样式不会乱。而如果直接使用一张背景图来实现，就不能达到这个效果了。、

上班之余的一点小心得，如果能对大家有所帮助，我会觉得很开心。哈哈哈，年前最后一天班，也是第一次发文章，祝大家新年快乐~ 也希望武汉的疫情能早日解决~