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 分钟前
JS 的行为设计模式:策略、观察者与命令模式
javascript·设计模式·命令模式
史努比的大头8 分钟前
前端开发深入了解性能优化
前端
码农研究僧10 分钟前
Java或者前端 实现中文排序(调API的Demo)
java·前端·localecompare·中文排序·collator
营赢盈英16 分钟前
OpenAI API key not working in my React App
javascript·ai·openai·reactjs·chatbot
吕永强1 小时前
HTML表单标签
前端·html·表单标签
范特西是只猫1 小时前
echarts map地图动态下钻,自定义标注,自定义tooltip弹窗【完整demo版本】
前端·javascript·echarts
麒麟而非淇淋1 小时前
AJAX 进阶 day4
前端·javascript·ajax
图灵苹果1 小时前
【个人博客hexo版】hexo安装时会出现的一些问题
前端·前端框架·npm·node.js
IT-陈2 小时前
app抓包 chrome://inspect/#devices
前端·chrome