css绘制各种形状图形（第二版）

栏目: CSS · 发布时间: 7年前

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

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

一、实心圆

css绘制各种形状图形（第二版） 

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

二、圆环（空心圆）

css绘制各种形状图形（第二版） 

.ring {
    width: 100px;
    height: 100px;
    border: 10px solid #8BC34A;
    border-radius: 100%;
}

三、椭圆

css绘制各种形状图形（第二版） 

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

四、半圆

css绘制各种形状图形（第二版） css绘制各种形状图形（第二版） 

.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;
}

五、四分之一圆（扇形）

css绘制各种形状图形（第二版） 

.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;
}

六、心形

css绘制各种形状图形（第二版） 

.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%;
}

七、鸡蛋

css绘制各种形状图形（第二版） 

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

八、太极八卦阵图

css绘制各种形状图形（第二版） 

.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%;
}

九、叶子（花瓣）

css绘制各种形状图形（第二版） 

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

css绘制各种形状图形（第二版） 

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

十、五叶花瓣

css绘制各种形状图形（第二版） 

.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);
}

十一、牵牛花

css绘制各种形状图形（第二版） 

.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);
}

十二、风车

css绘制各种形状图形（第二版） 

.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);
}

十四、小尾巴

css绘制各种形状图形（第二版） 

.xwb1 {
    width: 20px;
    height: 30px;
    border-left: 8px solid #8BC34A;
    border-radius: 30px 0 0 0;
}

十五、箭头

css绘制各种形状图形（第二版） 

.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);
}

十六、月亮

css绘制各种形状图形（第二版） 

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

十六、三角形

css绘制各种形状图形（第二版） css绘制各种形状图形（第二版） 

.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;
}

css绘制各种形状图形（第二版） 

.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;
}

css绘制各种形状图形（第二版） css绘制各种形状图形（第二版） 

.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;
}

css绘制各种形状图形（第二版） 

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

十七、梯形

css绘制各种形状图形（第二版） 

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

css绘制各种形状图形（第二版） 

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

十八、边框对话框

css绘制各种形状图形（第二版） 

.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;
}

十九、锁

css绘制各种形状图形（第二版） 

.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%);
}

二十、立体球型

css绘制各种形状图形（第二版） 

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

二十一、圆柱

css绘制各种形状图形（第二版） 

<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;
}

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

（CSS渐变绘制切角效果）


以上所述就是小编给大家介绍的《css绘制各种形状图形（第二版）》，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持！

查看所有标签

本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。

码农书籍
Spark大数据分析技术与实战

Spark大数据分析技术与实战

董轶群、曹正凤、赵仁乾、王安 / 电子工业出版社 / 2017-7 / 59.00

Spark作为下一代大数据处理引擎，经过短短几年的飞跃式发展，正在以燎原之势席卷业界，现已成为大数据产业中的一股中坚力量。 《Spark大数据分析技术与实战》着重讲解了Spark内核、Spark GraphX、Spark SQL、Spark Streaming和Spark MLlib的核心概念与理论框架，并提供了相应的示例与解析。 《Spark大数据分析技术与实战》共分为8章，其中前4......一起来看看 《Spark大数据分析技术与实战》 这本书的介绍吧!

码农工具
Markdown 在线编辑器
Markdown 在线编辑器

Markdown 在线编辑器

RGB HSV 转换
RGB HSV 转换

RGB HSV 互转工具

HEX CMYK 转换工具
HEX CMYK 转换工具

HEX CMYK 互转工具

  • New
  • 文章
  • 话题
  • 教程
    • 关注 码农网 公众号
    版权所有，保留一切权利！© 2018-2026 码农网 粤ICP备17054400号-3