CSS绘制各种各样的形状图形

已于 2024-10-09 16:17:27 修改
阅读量706 收藏 7
点赞数 18
文章标签： css
于 2024-10-09 15:52:29 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/csdnsunyue/article/details/142788517
版权

CSS绘制各种各样的形状图形
目录
实心圆
圆环（空心圆）
半圆
四分之一圆（扇形）
心形
吃豆人
鸡蛋
椭圆
胶囊
叶子（花瓣）
五叶花瓣
四叶草
三角形
平行四边形
梯形
边框对话框
太极八卦阵图
月亮
立体球形
我们在编写前端代码时，经常会遇到各种各样的形状图形（如：边框对话框，三角形，平行四边形、圆角边框、圆形、四叶草、花瓣等），除了用背景图片（css雪碧图或css精灵图+定位引用）和插入img图片的方法，我们还可以用css边框、圆角（border-radius）、渐变和定位的方法结合使用，绘制各种各样的形状图形。

实心圆请添加图片描述

.circle {
width: 120px;
height: 120px;
background: #317ef3;
border-radius: 100%;
}
圆环（空心圆）

在这里插入图片描述

.ring {
width: 120px;
height: 120px;
border: 10px solid #317ef3;
border-radius: 100%;
box-sizing: border-box;
}
半圆

在这里插入图片描述

//上半圆
.top-semicircle {
width: 120px;
height: 60px;
background: #317ef3;
border-radius: 60px 60px 0 0;
/顺时针方向，四个值依次分别表示左上、右上、右下、左下/
}
//右半圆
.rt-semicircle {
width: 60px;
height: 120px;
background: #317ef3;
border-radius: 0 60px 60px 0;
}

//左半圆
.lf-semicircle {
width: 60px;
height: 120px;
background: #317ef3;
border-radius: 60px 0 0 60px;
}

//下半圆
.bot-semicircle {
width: 120px;
height: 60px;
background: #317ef3;
border-radius: 0 0 60px 60px;
}
四分之一圆（扇形）

在这里插入图片描述

.toplf-sector,
.toprt-sector,
.botlf-sector,
.botrt-sector {
width: 60px;
height: 60px;
background: #317ef3;
}

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

在这里插入图片描述

.love {
width: 100px;
height: 100px;
background: #317ef3;
position: relative;
transform: rotate(45deg);
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
}
.love::before,.love:after{
content: “”;
background: #317ef3;
position: absolute;
}
.love:after {
width: 50px;
height: 100px;
background: #317ef3;
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;
}
原理图，奉上
在这里插入图片描述

吃豆人

在这里插入图片描述

.eat {
width: 0;
height: 0;
border: 60px solid #317ef3;
border-radius: 100%;
border-right-color: transparent;
}
值得注意的是如果右边框的颜色设置为白色的话，右边会有一条蓝色线条
在这里插入图片描述

鸡蛋

在这里插入图片描述

.egg {
width: 100px;
height: 150px;
background: #317ef3;
border-radius: 50px 50px 50px 50px/90px 90px 60px 60px;
}
原理图奉上：
在这里插入图片描述

椭圆
在这里插入图片描述

.ellipse1 {
width: 180px;
height: 120px;
background: #317ef3;
border-radius: 100%;
/* border-radius: 90px/60px; */
}
在这里插入图片描述

.ellipse2 {
width: 120px;
height: 180px;
background: #317ef3;
border-radius: 100%;
/* border-radius: 60px/90px; */
}
胶囊

在这里插入图片描述

.capsule1 {
width: 200px;
height: 100px;
background: #317ef3;
border-radius: 50px;
}
在这里插入图片描述

.capsule2 {
width: 100px;
height: 200px;
background: #317ef3;
border-radius: 50px;
}
叶子（花瓣）

在这里插入图片描述

.leaf1 {
width: 100px;
height: 100px;
background: #317ef3;
border-radius: 0 100px;
}
在这里插入图片描述

.leaf2 {
width: 100px;
height: 100px;
background: #317ef3;
border-radius: 80px 0px;
}
在这里插入图片描述

.leaf3 {
width: 100px;
height: 100px;
background: #317ef3;
border-radius: 50px 50px 0 50px;
}
五叶花瓣

在这里插入图片描述

.five-petal { width: 160px; height: 160px; }

.five-petal span {
display: block;
width: 80px;
height: 80px;
background: #317ef3;
border-radius: 0 100px;
transform-origin: 100% 100%;
position: absolute;
}

.five-petal .petal2 {
transform: rotate(72deg);
}

.five-petal .petal3 {
transform: rotate(144deg);
}

.five-petal .petal4 {
transform: rotate(216deg);
}

.five-petal .petal5 {
transform: rotate(288deg);
}
四叶草

在这里插入图片描述

 <!-- 四叶草 -->
    <div class="four-leaf mar30">
        <span class="leaf1"></span>
        <span class="leaf2"></span>
        <span class="leaf3"></span>
        <span class="leaf4"></span>
    </div>

.four-leaf {
width: 210px;
height: 210px;
position: relative;
}

.four-leaf span {
display: block;
width: 100px;
height: 100px;
background: #317ef3;
position: absolute;
}

.four-leaf span.leaf1 {
left: 0;
top: 0;
border-radius: 50px 50px 0 50px;
}

.four-leaf span.leaf2 {
right: 0;
top: 0;
border-radius: 50px 50px 50px 0;
}

.four-leaf span.leaf3 {
left: 0;
bottom: 0;
border-radius: 50px 0 50px 50px;
}

.four-leaf span.leaf4 {
right: 0;
bottom: 0;
border-radius: 0 50px 50px 50px;
}
三角形
实现原理：

在这里插入图片描述

.triangle-shiyi {
width: 0;
height: 0;
border: 50px solid #317ef3;
border-left-color: red;
border-top-color: aquamarine;
border-right-color: bisque;
}

在这里插入图片描述

.dbzj-sanjiao1 {
width: 0;
height: 0;
border-bottom: 100px solid #317ef3;
border-right: 100px solid transparent;
}

.dbzj-sanjiao2 {
width: 0;
height: 0;
border-bottom: 100px solid #317ef3;
border-left: 100px solid transparent;
}

在这里插入图片描述

.dbzj-sanjiao3 {
width: 0;
height: 0;
border-top: 100px solid #317ef3;
border-right: 100px solid transparent;
}

.dbzj-sanjiao4 {
width: 0;
height: 0;
border-top: 100px solid #317ef3;
border-left: 100px solid transparent;
}

在这里插入图片描述

.dbzj-sanjiao5 {
width: 0;
height: 0;
border-bottom: 50px solid #317ef3;
border-left: 100px solid transparent;
/* border-left、border-right决定宽度 /
/ border-top、border-bottom决定高度 */
}

.dbzj-sanjiao6 {
width: 0;
height: 0;
border-bottom: 50px solid #317ef3;
border-right: 100px solid transparent;
}
在这里插入图片描述

.dbzj-sanjiao7 {
width: 0;
height: 0;
border-bottom: 100px solid #317ef3;
border-right: 50px solid transparent;
}

.dbzj-sanjiao8 {
width: 0;
height: 0;
border-bottom: 100px solid #317ef3;
border-left: 50px solid transparent;
}

在这里插入图片描述

.dbzj-sanjiao9 {
width: 0;
height: 0;
border-top: 50px solid #317ef3;
border-right: 100px solid transparent;
}

.dbzj-sanjiao10 {
width: 0;
height: 0;
border-top: 50px solid #317ef3;
border-left: 100px solid transparent;
}
在这里插入图片描述

.dbzj-sanjiao11 {
width: 0;
height: 0;
border-left: 40px solid transparent;
border-right: 40px solid transparent;
border-bottom: 100px solid #317ef3;
/三角形的宽度w=left+right,h=bottom/
}

在这里插入图片描述

.dbzj-sanjiao12 {
width: 0;
height: 0;
border-bottom: 50px solid #317ef3;
border-right: 100px solid transparent;
position: relative;
}

.dbzj-sanjiao12::before {
content: “”;
position: absolute;
left: 0;
top: 0;
border-bottom: 50px solid #fff;
border-right: 20px solid transparent;
}
平行四边形

在这里插入图片描述

.pxsbx1 {
width: 200px;
height: 120px;
background: #317ef3;
color: #fff;
text-align: center;
line-height: 120px;
font-size: 18px;
transform: skewX(30deg);
}
在这里插入图片描述

.pxsbx2 {
width: 200px;
height: 120px;
text-align: center;
line-height: 120px;
position: relative;
font-size: 18px;
color: #fff;
}

.pxsbx2::after {
content: “”;
position: absolute;
left: 0;
top: 0;
z-index: -1;
width: 200px;
height: 120px;
background: #317ef3;
transform: skewX(30deg);
}
与上面的平行四边形相比，可以看到该图形中的文字不会发生倾斜，方法是在文字层后添加一个伪元素绘制平行四边。

在这里插入图片描述

.pxsbx3 {
width: 100px;
height: 160px;
background: #317ef3;
transform: skewY(30deg);
}

.pxsbx4 {
width: 100px;
height: 160px;
background: #317ef3;
transform: skewY(-30deg);
}
梯形

在这里插入图片描述

.tixing1 {
width: 100px;
height: 0;
border-bottom: 100px solid #317ef3;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
}

在这里插入图片描述

.tixing2 {
width: 100px;
height: 100px;
background: #317ef3;
position: relative;
}

.tixing2::before {
content: “”;
width: 0;
height: 0;
border-bottom: 100px solid #317ef3;
border-right: 50px solid transparent;
position: absolute;
left: 100%;
top: 0;
}
边框对话框

在这里插入图片描述

.duihuakuang1 {
width: 200px;
height: 120px;
border: 2px solid #317ef3;
position: relative;
}

.duihuakuang1::before {
content: “”;
position: absolute;
left: 40px;
top: 92%;
width: 20px;
height: 20px;
border-right: 2px solid #317ef3;
border-bottom: 2px solid #317ef3;
transform: rotate(45deg);
background: #fff;
}
太极八卦阵图

在这里插入图片描述

#yin-yang {
width: 96px;
height: 48px;
background: #eee;
border-color: red;
border-style: solid;
border-width: 2px 2px 50px 2px;
border-radius: 100%;
position: relative;
}

#yin-yang:before {
content: “”;
position: absolute;
top: 50%;
left: 0;
background: #eee;
border: 18px solid red;
border-radius: 100%;
width: 12px;
height: 12px;
}

#yin-yang:after {
content: “”;
position: absolute;
top: 50%;
left: 50%;
background: red;
border: 18px solid #eee;
border-radius:100%;
width: 12px;
height: 12px;
}
月亮

在这里插入图片描述

#moon {
width: 80px;
height: 80px;
border-radius: 50%;
box-shadow: 15px 15px 0 0 red;
}
立体球形

在这里插入图片描述

.litiqiuxing1 {
width: 100px;
height: 100px;
border-radius: 100%;
background: #317ef3;
background: radial-gradient(circle at 25% 35%, #fff, #317ef3, #071529);
}

在这里插入图片描述

.litiqiuxing2 {
width: 100px;
height: 100px;
border-radius: 100%;
background: #317ef3;
background: radial-gradient(circle at top, #fff, #317ef3, #071529)
}
参考：
(用CSS绘制最常见的40种形状和图形)[https://www.cnblogs.com/zs-xanadu/p/9229242.html]

fanwan-7
关注
CSS绘制五角星
10-26
CSS绘制五角星、六角形、五边形、六边形、心形 通过纯CSS绘制五角星、六角形、五边形、六边形、心形等多种形状是前端开发中...通过合理地使用CSS的border、transform、position等属性，我们可以创造出各种各样的形状。
css绘制各种各样的形状图形
weixin_33676492的博客
09-29 702
我们在编写前端代码时，经常会遇到各种各样的形状图形（如：边框对话框，三角形，平行四边形、圆角边框、圆形、四叶草、花瓣等），除了用背景图片（css雪碧图或css精灵图+定位引用）和插入img图片的方法，我们还可以用css边框、圆角（border-radius）、渐变和定位的方法结合使用，绘制各种各样的形状图形。 1、实心圆 .circle...
css3半空心圆_css3画圆、css3画半圆、css3画空心圆和css3画四分之一圆
weixin_35675138的博客
02-01 1380
这篇文章将简述使用CSS3的border-radius来画圆、半圆和四分之一圆，并如何利用它们。如何使用border-radius属性下面是border-radius属性最基本的使用方法。.round {border-radius: 5px; /* 所有角都使用半径为5px的圆角，此属性为CSS3标准属性 */-moz-border-radius: 5px; /* Mozilla浏览器的私有属性 ...
css 画正圆 胶囊按钮 三角形
weixin_66579278的博客
05-10 982
css 画正圆 胶囊 三角形
CSS之圆角和阴影
weixin_45604020的博客
06-27 1050
在日常生活中我们可以看到很多主流网站都使用了圆角和阴影，目的是为了增加视觉效果，让看起来图片更饱满立体。很多网站的效果图都会设置阴影，这样子不仅显得更有层次而且还添加立体效果。日常生活中我们经常看到头像一般都设置成正圆形状，这样匀称且好看。很多时候我们可以看到许多按钮经常设置成胶囊形状。
CSS-Learning | 使用border-radius创建圆形和胶囊形状（长圆形）
qq_35536883的博客
04-17 5201
boder-radius属性 使用border-radius属性来设置圆角半径时可以使用长度值，或者百分比值。 在给它指定百分比值时，x轴和y轴分别相对于元素的宽度和高度来计算实际值。 所以，我们可以把一个正方形的元素变成圆形，只要把圆角半径设置成**至少50%**就好。 如果两个弧线相交，那么两个轴向就会分别缩小半径，直到圆弧不再相交。 可以像以下代码中所示，画出圆形和椭圆形。 <div ...
css绘制透明三角形
09-24
通过理解CSS边框的特性，并巧妙地使用伪元素，我们可以创造出各种各样的图形效果。这种方法不仅提高了网页的视觉丰富性，也增加了设计师的创造空间。希望本文能够帮助你更好地理解和掌握CSS绘制透明三角形的技巧，...
css3绘制卡通蝙蝠侠动画特效特效代码
03-20
在CSS3技术中，我们可以利用其强大的样式定义和动画功能来创建各种各样的视觉效果，包括复杂的卡通人物动画。这个“css3绘制卡通蝙蝠侠动画特效”就是一个很好的实例，展示了CSS3在网页设计中的创新应用。下面我们将...
css3绘制卡通的野外森林背景特效
09-08
在CSS3的世界里，我们可以利用其强大的图形渲染能力来创建各种各样的视觉效果，包括复杂的卡通背景。"css3绘制卡通的野外森林背景特效"是一个典型的应用实例，它展示了CSS3在网页设计中的无限可能性。这个特效通过...
css3绘制闪电加载动画特效.zip
10-09
CSS3作为现代网页设计的重要组成部分，提供了丰富的动画和图形绘制功能，让开发者能够创造出各种各样的动态效果。本资源"css3绘制闪电加载动画特效.zip"就是一个很好的实例，它利用CSS3的特性来实现一个逼真的闪电...
CSS3圆形花瓣导航条
09-22
基于HTML5和CSS3圆形花瓣导航条，兼容IE，Chrome，FF
CSS3 圆形展开像花瓣的导航菜单.rar
07-10
HTML5 CSS3技术实现圆形展开的导航菜单特效，菜单展开后，围绕成花瓣的效果，好像八大行星围绕太阳的样子。主菜单是大圆圈，其它子菜单是小圆圈，围绕在大圆圈的周围，本菜单特效源码使用CSS3技术袜，因此可很好的使用在移动端设备中，Android核心或IOS核心的手机浏览器，都可直接打开体验效果。
平行四边形的效果实现
02-08
使用ShapeDrawable、shape和canvas实现平行四边形的效果
css实现胶囊型按钮
simpleasong的博客
05-21 4785
这里写自定义目录标题欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入 欢迎使用Markdown编辑器 你好！ 这是你第一次使用 Markdown编辑器 所展示的欢迎页。如果你想学习如何使用Mar
CSS--实心小圆点样式
聆听。。花开雨落的博客
03-25 8291
<style> .marker { width: 50px; height: 50px; border: 1px solid #088; border-radius: 100px; background-color: #FFFFFFF; opacity: 0.5; }...
一个有意思的胶囊状的进度指示条（纯CSS）
baijian0421的博客
05-08 3256
这段时间主要在做前端的一些报表工作，做了几个用CSS样式来控制的图形，感觉挺有意思，就跟大家一起分享一下。 第一个，胶囊一样的进度指示图，如图 进度指示可以通过设置样式progress_0 ~ progress_5来动态改变，直接上代码了。 HTML Code 1 <div class='level_bar progress_0'> 2 <d...
用CSS绘制最常见的40种形状和图形(1)
最新发布
2301_76379381的博客
04-11 924
基础知识是前端一面必问的，如果你在基础知识这一块翻车了，就算你框架玩的再6，webpack、git、node学习的再好也无济于事，因为对方就不会再给你展示的机会，千万不要因为基础错过了自己心怡的公司。前端的基础知识杂且多，并不是理解就ok了，有些是真的要去记。当然了我们是牛x的前端工程师，每天像背英语单词一样去背知识点就没必要了，只要平时工作中多注意总结，面试前端刷下题目就可以了。什么？你问面试题资料在哪里，这不是就在你眼前吗（滑稽te(30deg);Yin Yang(阴阳八卦)
[workingNotes]使用html5画实心圆的两种方法
binglingxueyou的专栏
03-02 5268
一个很简单的任务，搞了三天。关键是对项目上使用的extjs不熟悉，本来想通过其监听器listener:  afterlayout和afterrender，调用js来渲染画出实心圆，但是对页面加载顺序没有搞清楚，导致每次只有调整浏览器大小，强制页面渲染，才能显示出来效果。 记录一下通过html中的css或者js来实现实心圆的两种方法： 1. css实现 直接通过下列css代码即
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值