css 左上角角标

CSS 左上角的角标是一个很好用的功能，可以用于标记某个元素的状态或者标识某些特殊内容。在实际应用中，左上角角标通常是一个小三角形，它可以很容易地添加在一个元素的左上角，让这个元素显得更加有视觉吸引力和表意性。

/* CSS 样式 */.badge {
      position: relative;
}
.badge .corner {
      position: absolute;
      top: 0;
      left: 0;
      width: 0;
      height: 0;
      border-top: 2em solid transparent;
      border-right: 2em solid #f00;
}
.badge .content {
      position: relative;
      z-index: 1;
      background: #fff;
      padding: 1em;
}
    

首先，在 HTML 中，我们需要将 badge 的 class 添加到我们想要添加角标的元素上，然后在这个元素内部，再添加一个 corner 元素和一个 content 元素，分别用来放置角标和元素内容。

接下来，我们需要把 content 元素设置为 badge 元素的相对位置，并且把 z-index 值设置为 1，这样就可以保证元素内容可以被正常显示在角标之上了。

最后，我们需要设置 corner 元素的绝对定位，并且设置它的左、上、宽和高，这样我们就可以在元素的左上角看到一个漂亮的小三角形了。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！