console 命令行工具 X clear
console
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Gradient Trapezoid</title>
    <style>
        .trapezoid {
            width: 150px; /* Adjust width as needed */
            height: 40px; /* Adjust height as needed */
            background: linear-gradient(to top, #1b72ff, #14244b), linear-gradient(to right, #0d1b3a, #1e3d73),linear-gradient(to top, #1b72ff, #14244b); /* Gradient color */
            clip-path: polygon(10% 0%, 90% 0%, 100% 100%, 0% 100%); /* Trapezoid shape */
            display: flex;
            justify-content: center;
            align-items: center;
            color: white;
            font-weight: bold;
            position: relative;
        }

        .trapezoid::after {
            /* content: ""; */
            display: block;
            width: 80%;
            height: 20px; /* Height of the shadow */
            background: linear-gradient(to right, #204074, #14244b);
             /* Shadow gradient */
            background:  linear-gradient(to top, #1b72ff, #14244b);
            border-radius: 5px;
            position: absolute;
            bottom: 0px; /* Adjust position below the trapezoid */
        }
    </style>
</head>
<body>
    <div class="trapezoid">
        IT 云
    </div>
</body>
</html>