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>
相关推荐
摸鱼仙人~2 分钟前
前端面试手写核心 Cheat Sheet(终极精简版)
前端
馬致远19 分钟前
Win7 配置 Vue脚手架
javascript·vue.js·ecmascript
Ashley_Amanda21 分钟前
深入浅出Web Dynpro:SAP企业级Web应用开发全面解析
前端
方安乐25 分钟前
概念:前端工程化实践
前端
一见31 分钟前
WorkBuddy安装Skill的方法
android·java·javascript
kyriewen34 分钟前
Flexbox 完全指南:从此告别浮动,拥抱一维战神
前端·css·html
xChive34 分钟前
ECharts3D图表 | 3D柱状图和3D饼图实现思路
前端·3d·echarts
HookJames35 分钟前
解决Claude Code v2.1.74 官方找不到模型的问题-终结版
前端·chrome
代码煮茶36 分钟前
Vite 工程化实战 | 从 0 配置一个企业级前端项目(按需引入 / 环境变量 / 打包优化)
前端·vue.js
程序员Sunday36 分钟前
5000 字长文,全网最细的OpenClaw(小龙虾)架构拆解,我建议你认真看完
前端·人工智能