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>
相关推荐
程序员黑豆9 小时前
Java包装类:基本类型与对象的桥梁
java·前端·ai编程
bugcome_com11 小时前
JWT 知识小课堂:从入门到精通,一文吃透 JSON Web Token
前端·json
To_OC12 小时前
写了三天 Next.js,我的 React 世界观被拆了又装回去
前端·全栈·next.js
独泪了无痕12 小时前
viewer.js 安装与配置指南:实现图片预览功能
前端·vue.js
起床学FPGA14 小时前
AI回答问题之后,会自动跳到最下面的问题
开发语言·javascript·ecmascript
Fluxart.ai14 小时前
电商商品图审核怎么自动化?规则引擎、人工复核与发布门禁
java·前端·自动化
why技术14 小时前
AI 写的文章,可能都带着手敲一遍都去不掉的“隐形水印”。
前端·人工智能·后端
愚公搬代码15 小时前
【愚公系列】《Android应用案例开发大全》016-LBS类应用掌上杭州(辅助工具类的开发)
android·前端
CodeSheep15 小时前
又一个华为天才少年,离职了!
前端·后端·程序员
kyriewen15 小时前
面试官说"打开你的AI工具"——我才发现,他考的根本不是写代码
前端·人工智能·面试