BUG介绍

有一个前端产品，需求是需要给一个文本块加上个角标，虽然产品没给具体样式上的要求，但是作为直男用仅存的一点点细胞，还是花了点时间从网上找来一段用 css 实现的角标，感觉还行叭：

查看源码

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
    <style>
      body {
        width: 100vw;
        height: 100vh;
        background: #1b1b1b;
      }

      #container {
        position: relative;
        margin: 50px;
        padding: 35px;
        width: 230px;
        height: 50px;
        background: darkslateblue;
        border-radius: 15px;
        font-weight: bold;
      }

      #corner {
        position: absolute;
        top: -.4rem;
        right: -1rem;
      }

      #corner > span {
        position: absolute;
        z-index: 1;
        top: 0;
        right: .8rem;
        width: 4em;
        color: white;
        font-weight: bold;
        font-style: oblique;
      }

      #corner:before {
        position: absolute;
        width: 3em;
        top: -0.2rem;
        right: 0.5rem;
        z-index: 1;
        padding-right: 0.6rem;
        font-weight: bold;
        line-height: 0;
        color: black;
        height: 0;
        border: 1rem solid green;
        border-left-color: transparent;
        content: "";
        box-shadow: 0 0.3rem 0.3rem -0.3rem black;
      }

      #corner:after {
        content: "";
        position: absolute;
        top: 1.7rem;
        right: 0.5rem;
        border: 0.25rem solid darkgreen;
        border-right-color: transparent;
        border-bottom-color: transparent;
      }

    </style>
</head>
<body>
<div id="container">
    <span>人类从历史中学到的唯一教训是</span>
    <span>人类无法从历史中学到任何教训</span>
    <div id="corner">
        <span>黑格尔</span>
    </div>
</div>
</body>
</html>

看上去还🆗～然鹅……
后来偶然发现，如果用户的浏览器设置了页面缩放，在某些缩放值下角标会产生奇怪的裂缝：
bug

通过在各种设备上测试，发现除了 safari 以外，PC 上的 Chrome、IE，手机上的 FireFox、UC 等，或多或少都存在这个问题，其中尤以 PC 的 Chrome 最为严重，严重影响美观😧

代码分析

角标主体部分是用伪元素实现的，具体样式为：

#corner:before {
	position: absolute;
	width: 3em;
	top: -0.2rem;
	right: 0.5rem;
	z-index: 1;
	padding-right: 0.6rem;
	font-weight: bold;
	line-height: 0;
	color: black;
	height: 0;
	border: 1rem solid green;
	border-left-color: transparent;
	content: "";
	box-shadow: 0 0.3rem 0.3rem -0.3rem black;
}