【css】创建一个带有上矩形和下倒三角角标

无言非影

于 2024-06-18 16:57:24 发布

阅读量414

点赞数 6

分类专栏： CSS 文章标签： css 前端

本文链接：https://blog.csdn.net/weixin_40887836/article/details/139778381

版权

前端同时被 2 个专栏收录

13 篇文章 0 订阅

订阅专栏

CSS

2 篇文章 0 订阅

订阅专栏

在这里插入图片描述

涉及到的主要CSS属性：

clip-path：使用CSS剪切路径属性创建上矩形和下倒三角形的形状。
transform: scale(0.8);：缩小角标的大小，使其看起来更协调。

完整html及css:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>上面矩形下面倒三角的角标</title>
    <style>
      .corner-badge {
        position: relative;
        display: inline-block;
        padding: 10px 42px 10px 10px;
        background: #f4f4f5;
      }

      .corner-badge .badge {
        position: absolute;
        top: 0;
        right: 0;
        background-color: #fe0b36;
        color: white;
        font-size: 12px;
        font-weight: bold;
        padding: 4px 5px 10px;
        clip-path: polygon(0 0, 100% 0, 100% 70%, 50% 100%, 0 70%);
        transform: scale(0.8);
      }
    </style>
  </head>
  <body>
    <div class="corner-badge">
      <span>XXXX</span>
      <div class="badge">最XX</div>
    </div>
  </body>
</html>