后端实现预览pdf，mp4,图片-CFANZ编程社区

后端实现预览pdf，mp4,图片

天行五煞 2024-06-25 阅读 26

在这里插入图片描述

涉及到的主要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>

0 条评论