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>
相关推荐
摆烂大大王36 分钟前
玩转 OpenClaw:用 TaskFlow + Heartbeat 打造自动化工作流
前端·人工智能·自动化
zhangxingchao40 分钟前
AI 大模型核心六:量化、Workflow 与 Agent、多轮 RAG
前端·人工智能·后端
梦想的颜色1 小时前
TypeScript 完全指南(上):从零开始掌握类型系统
前端·typescript
之歆1 小时前
Day01_ES6+ 专业指南:从基础到实战的现代JavaScript开发(下)
前端·javascript·es6
lichenyang4531 小时前
鸿蒙 MVVM 实战:从 Demo 到工程化,聊聊登录、状态管理与埋点系统设计
前端
IT_陈寒2 小时前
Vite打包时遇到的坑,原来问题出在这里
前端·人工智能·后端
kyriewen2 小时前
AI生成代码快如闪电,但我修了三个小时——它到底帮了谁?
前端·javascript·ai编程
竹林8183 小时前
用 wagmi v2 和 viem 手写 NFT 市场批量上架功能,我踩遍了所有异步坑
javascript
ayqy贾杰3 小时前
基层管理的三板斧,在AI时代行不通了
前端·后端·团队管理
Apifox3 小时前
Apifox 5 月更新|Postman 导入优化、Runner 支持非 root 运行、请求代码自动带鉴权
前端·后端·安全