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

在这里插入图片描述

涉及到的主要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>XXXXspan>
      <div class="badge">最XXdiv>
    div>
  body>
html>

相关阅读:
JAVA客户端使用账号密码调用influxdb2报错：{“code“:“unauthorized“,“message“:“Unauthorized“}
EasyUI动态加载组件
面试算法十问（中英文）
涉及法律诉讼和负债670万美元的【工务园】申请纳斯达克IPO上市
GO语言网络编程（并发编程）定时器
机器学习——评估和改进学习算法
Harbor仓库
Open3D(C++) Ransac拟合平面分割点云
Vue页面生成PDF后调起浏览器打印
《docker高级篇（大厂进阶）：1.Docker复杂安装详说》包括：安装mysql主从复制、安装redis集群

原文地址：https://blog.csdn.net/weixin_40887836/article/details/139778381