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

虽然我们现在大都使用字体图标或者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;background: #8BC34A;border-radius: 40px 0 0 40px;position: absolute;right: 99%;top: 0;
}.heart-shaped::after {content: "";width: 80px;height: 40px;background: #8BC34A;border-radius: 40px 40px 0 0;position: absolute;left: 0;bottom: 99%;
}

七、鸡蛋

.egg {width: 150px;height: 200px;background: #8BC34A;border-radius: 75px 75px 75px 75px / 130px 130px 70px 70px;
}

八、太极八卦阵图

.taiji {width: 140px;height: 70px;border: 2px solid #8BC34A;border-bottom: 70px solid #8BC34A;border-radius: 100%;position: relative;
}.taiji::before {content: "";position: absolute;left: 0;top: 50%;width: 20px;height: 20px;background: #fff;border: 25px solid #8BC34A;border-radius: 100%;
}.taiji::after {content: "";position: absolute;right: 0;top: 50%;width: 20px;height: 20px;background: #8BC34A;border: 25px solid #fff;border-radius: 100%;
}
web前端开发学习Q-q-u-n：784783012 ，分享学习的方法和需要注意的小细节，不停更新最新的教程和学习方法（详细的前端项目实战教学视频）

九、叶子（花瓣）

.leaf1 {width: 80px;height: 80px;background: #8BC34A;border-radius: 0 80px;
}

.leaf2 {width: 80px;height: 80px;background: #8BC34A;border-radius: 40px 40px 0 40px;
}

十、五叶花瓣

.five-flower {position: relative;width: 300px;height: 280px;
}.five-flower .petal {display: block;width: 120px;height: 120px;background: #8BC34A;border-radius: 0 120px;position: absolute;transform-origin: 100% 100%;
}.five-flower .petal1 {transform: rotate(72deg);
}.five-flower .petal2 {transform: rotate(144deg);
}.five-flower .petal3 {transform: rotate(216deg);
}.five-flower .petal4 {transform: rotate(288deg);
}
web前端开发学习Q-q-u-n：784783012 ，分享学习的方法和需要注意的小细节，不停更新最新的教程和学习方法（详细的前端项目实战教学视频）

十一、牵牛花

.qiannuhua {position: relative;width: 200px;height: 200px;margin-left: 140px;
}.qiannuhua .petal {display: block;width: 120px;height: 120px;background: #8BC34A;border-radius: 0 120px;position: absolute;transform-origin: 0% 100%
}.qiannuhua .petal1 {transform: rotate(72deg);
}.qiannuhua .petal2 {transform: rotate(144deg);
}.qiannuhua .petal3 {transform: rotate(216deg);
}.qiannuhua .petal4 {transform: rotate(288deg);
}

十二、风车

.fengche {position: relative;width: 200px;height: 200px;
}.fengche .petal {display: block;width: 120px;height: 120px;background: #8BC34A;border-radius: 0 120px;position: absolute;transform-origin: 30% 100%
}.fengche .petal1 {transform: rotate(72deg);
}.fengche .petal2 {transform: rotate(144deg);
}.fengche .petal3 {transform: rotate(216deg);
}.fengche .petal4 {transform: rotate(288deg);
}

十三、小尾巴

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

十四、箭头

.xwb2 {width: 0;height: 0;border-bottom: 10px solid #8BC34A;border-left: 10px solid transparent;position: relative;transform: rotate(8deg);
}.xwb2::after {content: "";width: 20px;height: 18px;border-right: 5px solid #8BC34A;border-radius: 0px 40px 0 0;position: absolute;left: -30px;bottom: -15px;transform: rotate(-45deg);
}

十五、月亮

.moon {width: 80px;height: 120px;border-left: 40px solid #8BC34A;border-radius: 60px;
}

十六、三角形

.triangle-bot {width: 0;height: 0;border: 40px solid transparent;border-bottom-color: #8BC34A;
}.triangle-top {width: 0;height: 0;border: 40px solid transparent;border-top-color: #8BC34A;
}.triangle-lf {width: 0;height: 0;border: 40px solid transparent;border-left-color: #8BC34A;
}.triangle-rt {width: 0;height: 0;border: 40px solid transparent;border-right-color: #8BC34A;
}

.triangle-toplf,
.triangle-toprt,
.triangle-bottomlf,
.triangle-bottomrt {width: 0;height: 0;
}.triangle-toplf {border-top: 120px solid #8BC34A;border-right: 120px solid transparent;
}.triangle-toprt {border-top: 120px solid #8BC34A;border-left: 120px solid transparent;
}.triangle-bottomlf {border-bottom: 120px solid #8BC34A;border-right: 120px solid transparent;
}.triangle-bottomrt {border-bottom: 120px solid #8BC34A;border-left: 120px solid transparent;
}
web前端开发学习Q-q-u-n：784783012 ，分享学习的方法和需要注意的小细节，不停更新最新的教程和学习方法（详细的前端项目实战教学视频）

.triangle1 {border-bottom: 120px solid #8BC34A;border-right: 60px solid transparent;
}.triangle2 {border-top: 120px solid #8BC34A;border-left: 60px solid transparent;
}.triangle3 {border-top: 60px solid #8BC34A;border-right: 120px solid transparent;
}.triangle4 {border-top: 60px solid #8BC34A;border-left: 120px solid transparent;
}

.triangle5 {border-top: 80px solid #8BC34A;border-left: 40px solid transparent;border-right: 40px solid transparent;
}

十七、梯形

.tixing1 {border-bottom: 100px solid #8BC34A;border-left: 60px solid transparent;border-right: 60px solid transparent;width: 100px;height: 0;
}

.tixing2 {border-bottom: 120px solid #8BC34A;border-right: 120px solid transparent;width: 80px;
}

十八、边框对话框

.duihuakuang {width: 200px;height: 100px;border: 2px solid #8BC34A;border-radius: 6px;position: relative;
}.duihuakuang::before {content: "";width: 20px;height: 20px;background: #fff;border-right: 2px solid #8BC34A;border-bottom: 2px solid #8BC34A;position: absolute;left: 30%;top: 100%;transform: rotate(45deg);margin-top: -10px;
}
web前端开发学习Q-q-u-n：784783012 ，分享学习的方法和需要注意的小细节，不停更新最新的教程和学习方法（详细的前端项目实战教学视频）

十九、锁

.suo {width: 200px;height: 160px;background: #8BC34A;border-radius: 30px;position: relative;
}
/*锁孔*/
.suo::before {content: "";width: 25px;height: 50px;background: #fff;position: absolute;left: 50%;top: 50%;border-radius: 25px;transform: translate(-50%, -50%);
}
/*锁把*/
.suo::after {content: "";width: 80px;height: 70px;border: 20px solid #8BC34A;background: #fff;border-radius: 60px 60px 0 0;position: absolute;left: 50%;bottom: 89%;transform: translateX(-50%);
}

二十、立体球型

.qiu1 {width: 120px;height: 120px;background: #8BC34A;background-image: radial-gradient(at 20% 30%, #e5ffc7, #75af33, #375f0a);border-radius: 100%;
}

二十一、圆柱

 <div class="cylinder fl"><div class="ellipse"></div><div class="rectangle"></div>
</div>

.cylinder {position: relative;transform: rotateX(70deg);
}.ellipse {width: 100px;height: 100px;background: deepskyblue;border-radius: 50px;
}.rectangle {width: 100px;height: 400px;position: absolute;opacity: 0.6;background: deepskyblue;top: 0;left: 0;border-radius: 50px;z-index: -1;
}
web前端开发学习Q-q-u-n：784783012 ，分享学习的方法和需要注意的小细节，不停更新最新的教程和学习方法（详细的前端项目实战教学视频）

更多形状图形持续更新，欢迎大家讨论提出问题

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

html前端页面的基本骨架是,web前端入门到实战：css实现的骨架屏方案
web前端入门到实战:css实现的骨架屏方案发布时间:2020-08-04 01:32:03 来源:51CTO 阅读:152 作者:前端向南优点简单,不需要工程,不用puppeteer生成骨架d ...
转圈加载html,web前端入门到实战：纯CSS实现加载转圈样式
web前端入门到实战:纯CSS实现加载转圈样式发布时间:2020-05-27 18:11:33 来源:51CTO 阅读:134 作者:前端向南不同的项目中对于等待加载时转圈圈的样式是不同的,有的是 ...
web前端入门到实战：CSS颜色、背景和剪切
颜色 CSS 中可以改变文字的颜色还有元素的背景颜色.可以用颜色关键字来定义颜色,如red,但是这些颜色关键字并不常用. transparent transparent可以让文字或背景变的完全透明的颜 ...
web前端入门到实战：实现CSS形状变换
CSS3的"clip-path",这个"clip-path"看起来有点眼熟,因为它原本就存在于SVG里头,利用掩码(剪裁)的方法,连接坐标绘制掩码区域,就可以做 ...
web前端入门到实战：CSS文字下波浪线动画效果
之前有至少5个人在评论中询问我文章中链接hover时候波浪下划线动画是怎么实现的,类似下图gif示意: 这里就介绍下是如何实现的. 有两种实现方法,各有优劣. 一.使用径向渐变纯CSS实现就是使用径 ...
web前端入门到实战：CSS新属性实现特殊的图片显示效果
1 概述 1.1 前言使用一个或多个图像相关的CSS属性(background-blend-mode, mix-blend-mode, or filter)可以实现许多特殊的图片显示效果,共列举了2 ...
web前端入门到实战：五个最新的CSS特性以及如何使用它们
虽然CSS简单,但CSS是一门非常有意思的语言,CSS每年都有变化,而且都有不同的博主都在不同的时间段总结一些CSS的新特性.虽然这些新特性无法立刻得到众多浏览器的支持,但总是随着时间的发展,这些特性 ...
html中怎么做彩虹,web前端入门到实战：纯CSS画动态彩虹
效果效果图如下实现思路使用box-shadow画赤橙黄绿蓝靛紫7个弧形,拼接在一起 after伪元素写投影样式彩虹和投影都有动画 dom结构用两个嵌套的div容器,父容器来控制图标显示的位置 ...
web前端入门到实战：CSS实现平行四边形布局效果
如何实现下图所示的平行四边形布局效果? 一.skewX的局限一提到平行四边形,条件反射般的就会想起CSS transform中的skew()/skewX()/skewY()方法,可以让元素斜切,从而 ...

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

一、实心圆

二、圆环（空心圆）

三、椭圆

四、半圆

五、四分之一圆（扇形）

六、心形

七、鸡蛋

八、太极八卦阵图

九、叶子（花瓣）

十、五叶花瓣

十一、牵牛花

十二、风车

十三、小尾巴

十四、箭头

十五、月亮

十六、三角形

十七、梯形

十八、边框对话框

十九、锁

二十、立体球型

二十一、圆柱

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

最新文章

热门文章