css 实现一个卡片

html 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            width: 300px;
            height: 400px;
        }

        .code {
            height: 100px;
            width: 360px;
            margin-left: -30px;
            background-color: white;
            clip-path: inset(0 0 0 0 round 0 0 35% 35%);
            margin-bottom: -30px;
            position: relative;
        }
        .inner {
            width: 260px;
            height: 60px;
            background-color: black;
            position: absolute;
            bottom: 0px;
            left: 50px;
        }
        .image {
            height: 130px;
            background-color: blue;
            border-radius:0 0 10px 10px;
        }
    </style>
</head>
<body>
<div class="box">
    <div class="code">
        <div class="inner"></div>
    </div>
    <div class="image"></div>
</div>
</body>
</html>
相关推荐
国服第二切图仔3 分钟前
17-config命令 - 配置管理系统
java·前端·javascript
GuWenyue11 分钟前
放弃云端API!5套技术栈实战WebGPU端侧AI,前端独立跑本地大模型,省成本还保隐私
前端·数据库·人工智能
胡萝卜术8 小时前
当大模型遇上浏览器:用 React + WebGPU 在前端跑通 DeepSeek-R1 的实战笔记
前端·javascript·面试
不好听6139 小时前
Tailwind CSS 原子化 CSS 完全入门:为什么现代前端开发都在用?
前端·css
人间凡尔赛9 小时前
Next.js 16 生产级实战:Cache Components + View Transitions 完整指南
开发语言·javascript·ecmascript
触底反弹9 小时前
🔥 React 零基础入门(上):环境搭建 + JSX 深度解析
前端·react.js·typescript
why技术9 小时前
分享一套我一直在使用的 AICoding 组合拳,小而美的典范。
前端·后端·ai编程
朦胧之10 小时前
AI应用-消费流式输出
前端·javascript·ai编程
小林ixn10 小时前
在浏览器跑通 15 亿参数大模型:我用 React + WebGPU 复刻了 DeepSeek-R1
前端·react.js·前端框架
Csvn10 小时前
容器查询 @container 实战:告别无休止的媒体查询
前端