web前端入门到实战：css绘制各种形状图形

最新推荐文章于 2024-07-07 06:46:55 发布

魔方编程

最新推荐文章于 2024-07-07 06:46:55 发布

阅读量2.2k

点赞数 3

文章标签：前端 web前端 Css css3 css图形

本文链接：https://blog.csdn.net/wewfdf/article/details/102887792

版权

本文详细介绍了如何使用CSS创建各种形状，包括实心圆、圆环、椭圆、半圆、心形、叶子等，以及更复杂的太极八卦阵图、牵牛花和立体球型等。通过这些实例，探讨了CSS在图形设计中的应用和技巧，适合前端初学者和进阶者学习。

摘要由CSDN通过智能技术生成

虽然我们现在大都使用字体图标或者svg图片，似乎使用 CSS 来做图标意义不是很大，但怎么实现这些图标用到的一些技巧及思路是很值得我们的学习。

一、实心圆

.circle {
    width: 120px;
    height: 120px;
    background: #8BC34A;
    border-radius: 100%;
}

二、圆环（空心圆）

.ring {
    width: 100px;
    height: 100px;
    border: 10px solid #8BC34A;
    border-radius: 100%;
}
web前端开发学习Q-q-u-n：784783012 ，分享学习的方法和需要注意的小细节，不停更新最新的教程和学习方法（详细的前端项目实战教学视频）

三、椭圆

.ellipsis {
    width: 200px;
    height: 120px;
    background: #8BC34A;
    border-radius: 100px/60px;
}

四、半圆

.top-semicircle {
    width: 120px;
    height: 60px;
    background: #8BC34A;
    border-radius: 60px 60px 0px 0px;
}

.right-semicircle {
    width: 60px;
    height: 120px;
    background: #8BC34A;
    border-radius: 0 60px 60px 0;
}

.bottom-semicircle {
    width: 120px;
    height: 60px;
    background: #8BC34A;
    border-radius: 0 0 60px 60px;
}

.left-semicircle {
    width: 60px;
    height: 120px;
    background: #8BC34A;
    border-radius: 60px 0 0 60px;
}
web前端开发学习Q-q-u-n：784783012 ，分享学习的方法和需要注意的小细节，不停更新最新的教程和学习方法（详细的前端项目实战教学视频）

五、四分之一圆（扇形）

.toplf-sector,
.toprt-sector,
.bottomlf-sector,
.bottomrt-sector {
    width: 60px;
    height: 60px;
    background: #8BC34A;
}

.toplf-sector {
    border-radius: 60px 0 0 0;
}

.toprt-sector {
    border-radius: 0 60px 0 0;
}

.bottomlf-sector {
    border-radius: 0 0 0 60px;
}

.bottomrt-sector {
    border-radius: 0 0 60px 0;
}

六、心形

.heart-shaped {
    width: 80px;
    height: 80px;
    background: #8BC34A;
    position: relative;
    transform: rotate(45deg);
}

.heart-shaped::before {
    content: "";
    width: 40px;
    height: 80px;
    backgrou