HUA
首页/文章/css

CSS实现胶囊、半圆、90°扇形、4等份圆、吃豆人、对话框、爱心

2024-10-17
27 字约 1 分钟
...
学习
  • 通过两个半个胶囊组合而成，分别控制颜色及圆角 
<body>
    <div class="app">
        <div class="box">
            <div class="box-1 horizontal">横向</div>
            <div class="box-2 horizontal">对称</div>
        </div>
        <div class="box2">
            <div class="box-11 vertical">竖向</div>
            <div class="box-22 vertical">对称</div>
        </div>
    </div>
</body>
<style>
    .app {
        padding: 200px;
    }

    
    .box {
        display: flex;
        margin-bottom: 10px;
    }

    .horizontal {
        width: 80px;
        height: 50px;
        line-height: 50px;
        text-align: center;
        background-color: aqua;
    }

    .box-1 {
        
        border-radius: 25px 0 0 25px;
    }

    .box-2 {
        
        border-radius: 0 25px 25px 0;
        background-color: pink;
    }

    
    .vertical {
        width: 50px;
        height: 80px;
        line-height: 80px;
        text-align: center;
        background-color: aqua;
    }

    .box-11 {
        
        border-radius: 25px 25px 0 0;
    }

    .box-22 {
        
        border-radius: 0 0 25px 25px;
        background-color: pink;
    }
</style>
  • 设置一个长方形，长为宽的二倍

<body>
    <div class="app">
        <div class="horizontal">横向半圆</div>
        <div class="vertical">竖向半圆</div>
    </div>
</body>
<style>
    .app {
        padding: 200px;
    }
    .horizontal {
        width: 100px;
        height: 50px;
        line-height: 50px;
        background: aqua;
        border-radius: 0 0 50px 50px;
        text-align: center;
        margin-bottom: 10px;
    }
    .vertical {
        width: 50px;
        height: 100px;
        line-height: 50px;
        background: aqua;
        text-align: center;
        border-radius: 50px 0 0 50px;
        letter-spacing: 5px;
    }
</style>
  • 通过某一个角的圆角角度，实现扇形，不同方向还可以搭配旋转实现 
<body>
    <div class="box">
        <div class="toprt-sector">左上</div>
        <div class="toplf-sector">右上</div>
        <div class="botlf-sector">右下</div>
        <div class="botrt-sector">左下</div>
    </div>
</body>
<style>
    .box{
        display: flex;
    }
    .toplf-sector,
    .toprt-sector,
    .botlf-sector,
    .botrt-sector {
        width: 60px;
        height: 60px;
        background: aqua;
        line-height: 60px;
        text-align: center;
        margin-right: 10px;
    }
    .toprt-sector {
        border-radius: 60px 0 0 0;
    }
    .toplf-sector {
        border-radius: 0 60px 0 0;
    }
    .botlf-sector {
        border-radius: 0 0 60px 0;
    }
    .botrt-sector {
        border-radius: 0 0 0 60px;
    }
</style>

四个盒子组合实现

- 通过四个盒子分别设置圆角组合实现

<body>
    <div class="box">
        <div class="toprt-sector">左上</div>
        <div class="toplf-sector">右上</div>
        <div class="botrt-sector">左下</div>
        <div class="botlf-sector">右下</div>
    </div>
</body>
<style>
    .box{
        display: flex;
        flex-wrap: wrap;
        width: 120px;
    }
    .toplf-sector,
    .toprt-sector,
    .botlf-sector,
    .botrt-sector {
        width: 60px;
        height: 60px;
        background: aqua;
        line-height: 60px;
        text-align: center;
    }
    .toprt-sector {
        border-radius: 60px 0 0 0;
    }
    .toplf-sector {
        border-radius: 0 60px 0 0;
        background-color: pink;
    }
    .botlf-sector {
        border-radius: 0 0 60px 0;
        background-color: yellow;
    }
    .botrt-sector {
        border-radius: 0 0 0 60px;
        background-color: goldenrod;
    }
</style>

一个盒子实现

- 通过一个盒子的四个边框圆角实现，可以搭配旋转使用

<body>
    <div class="box">
    </div>
</body>
<style>
    .box{
        width: 0;
        height: 0;
        border-radius: 50%;
        border: 120px solid;
        border-left-color: pink;
        border-right-color: yellow;
        border-top-color: gold;
        border-bottom-color: aqua;
        transform: rotate(45deg);
    }
</style>

  • 通过某一角度边框透明实现，也可以通过四个盒子组合，某一个盒子设置透明
<body>
    <div class="box">
    </div>
</body>
<style>
    .box{
        width: 0;
        height: 0;
        border-radius: 50%;
        border: 120px solid aqua;
        border-right-color: rgba(255, 255, 0, 0);
    }
</style>

  • 通过伪元素加定位实现与Y轴偏移实现，宽高设为0，其中一个边框有色，其他透明色
<body>
    <div class="box">对话框</div>
</body>
<style>
    .box{
        width: 160px;
        height: 40px;
        line-height: 40px;
        text-align: center;
        border-radius: 10px;
        background-color: aqua;
        position: relative;
    }
    .box::after{
        content: '';
        width: 0;
        height: 0;
        position: absolute;
        bottom: 0;
        right: 20px;
        transform: translateY(20px);
        border: 10px solid aqua;
        border-bottom-color: transparent;
        border-right-color: transparent;
        border-left-color: transparent;
    }
</style>

伪元素实现

  • 旋转正方形为菱形，两个伪元素分别控制两边半圆部分，随后通过定位调整位置
<body>
    <div class="box">
        <div class="love"></div>
    </div>
</body>
<style>
    .box{
        padding: 200px;
    }
    .love {
        width: 100px;
        height: 100px;
        background: aqua;
        position: relative;
        transform: rotate(45deg);
    }
    .love::before,
    .love:after {
        content: "";
        background: aqua;
        position: absolute;
        display: inline-block;
    }
    .love:after {
        width: 50px;
        height: 100px;
        border-radius: 50px 0 0 50px;
        right: 99px;
        top: 0;
    }
    .love::before {
        width: 100px;
        height: 50px;
        border-radius: 50px 50px 0 0;
        bottom: 99px;
        left: 0;
    }
</style>

三盒子实现

  • 旋转正方形为菱形，两个盒子分别控制两边半圆部分，随后通过定位调整位置
<body>
    <div class="box">
        <div class="love">
            <div class="loveLeft"></div>
            <div class="loveRight"></div>
        </div>
    </div>
</body>
<style>
    .box {
        padding: 200px;
    }
    .love {
        width: 80px;
        height: 80px;
        background: aqua;
        transform: rotate(45deg);
        position: relative;
    }
    .loveLeft,
    .loveRight {
        position: absolute;
        background-color: pink;
    }
    .loveLeft {
        width: 40px;
        height: 80px;
        left: -40px;
        top: 0;
        border-radius: 40px 0 0 40px;
    }
    .loveRight {
        width: 80px;
        height: 40px;
        right: 0;
        top: -40px;
        border-radius: 40px 40px 0 0;
    }
</style>

如果您觉得这篇文章有帮助，请点个赞吧～

分享文章

相关文章

更多文章 →
css2026-06-17
外阴影和内阴影介绍
在前端页面设计中，阴影是非常常见的视觉效果。它可以让元素看起来更有层次感，也可以用来表达悬浮、按压、凹陷、卡片、按钮等状态。 CSS 中最常用的阴影属性是 。它既可以实现外阴影，也可以实现内阴影。 一、什么是外阴影 外阴影指的是元素外部的阴影效果。 它会出现在元素边框之外，让元素看起来像是从页面中“浮起来”了一样。常见的卡片、弹窗、按钮悬浮效果，基本都会用到外阴影。 例如： 这个阴影表示：元素下方有一层柔和的黑色阴影，让卡片看起来更有立...
学习
css2026-05-15
border-image-slice详细介绍
是 CSS 系列属性里最关键、也最容易让人懵的一个属性。 它的作用可以简单理解为： 把一张图片切成九宫格，然后决定哪几块用来绘制元素的边框。 它通常和这些属性一起使用： 或者简写成： 其中 决定“怎么切图”。 一、 是什么？ 普通的 只能画纯色边框： 但有时候我们想用图片作为边框，比如： 游戏按钮边框 像素风 UI 复古窗口 聊天气泡 卡牌边框 花纹装饰框 九宫格按钮背景 这时候就可以用 。 例如一张按钮图片长这样： 我们希望按钮变宽时...
学习
css2026-03-05
如何在最小副作用下创建 BFC
在 CSS 布局的江湖中， BFC (Block Formatting Context，块级格式化上下文) 是一个老生常谈却又至关重要的概念。无论是解决 高度塌陷 、 清除浮动 ，还是防止 垂直外边距重叠 ，BFC 都是我们的得力助手。 但是，创建 BFC 的方法有很多： 、 、 、 …… 哪种方法对现有布局的“破坏”最小？ ❌ 过去的老方法 在过去，为了触发 BFC，我们不得不使用一些带有副作用的“黑客”技巧： : 元素会脱离文档流，...
学习
css2026-03-03
CSS过渡性能解析：transition: all
CSS过渡性能深度解析：为什么 可能是你页面的隐形杀手 一、引言：一个被忽视的性能陷阱 你是否曾在项目中这样写： 看似简洁优雅，却可能在低端设备上引发卡顿、掉帧。 真相 ： 是前端性能优化中高频出现的“隐形陷阱”。本文将彻底揭开它的面纱。 二、核心概念： 到底在控制什么？ 指定 哪些CSS属性变化时触发动画过渡 。它是过渡效果的“守门员”： | 值 | 含义 | 生成的CSS | | | | | | | 所有 可过渡属性变化时均触发动画...
学习
css2026-01-26
在CSS中，四种高度视口单位的区别
在CSS中，视口单位是构建响应式网页设计的重要工具，特别是针对移动端开发。除了传统的 ，CSS新引入了 、 和 等更精确的单位，解决传统单位在移动端的局限性。 四种高度视口单位的区别 | 单位 | 全称 | 含义 | 特点 | | | | | | | vh | Viewport Height | 传统视口高度单位，1vh = 视口高度的1% | 在移动端有问题：不考虑浏览器UI变化，经常导致内容被遮挡或出现意外滚动 | | svh |...
学习
css2025-11-04
keyframes 关键帧机制
一、什么是 @keyframes？ 用于定义动画在不同时间点（关键帧）的样式变化；配合 属性应用到元素上。 定义动画 ：使用 声明关键帧序列； 应用动画 ：在选择器中通过 / 相关长属性控制表现。 二、基本语法 等价写法（ / ）： 三、与 属性配合使用 /相关长属性 | 属性名 | 含义 | 示例值 | | : | : | : | | | 动画名称 | | | | 持续时长 | 、 | | | 速度曲线 | / / / | | | 延...
学习

评论

请登录后发表评论

去登录
加载评论中...

目录