【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>

相关阅读:
JDBC概述
进程,内核线程,用户线程,协程,纤程......操作系统世界观
214页（10万字）以数据驱动为核心的区域医疗数据中台
萤火虫模糊回归算法（Matlab代码实现）
文字渐变输入框失去焦点保存数组常用方法
实时数仓-Hologres介绍与架构
python使用matplotlib可视化线图（line plot）、将图像保存为svg格式（将图像保存为png、jpg、jpeg等其他格式的语法类似）
每日五问（java）
黑马瑞吉外卖之过滤器后台登录验证（详细笔记说明）
【数据结构与算法】第三篇：二叉搜索树

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