CSS3绘制各种常见图形(圆形-椭圆形-三角形-五角星...)
圆形-椭圆形-三角形-倒三角形=左三角形-右三角形-菱形-平行四边形- 星形-六角星形-五边形-六边形-八角形-心形-蛋形-无穷符号-消息提示框-吃豆人
- 1
制作圆形:
要使用CSS来制作一个圆形,我们需要一个div,被给它设置一个ID
<div id="circle"></div>
圆形在设置CSS时要设置宽度和高度相等,然后设置border-radius属性为宽度或高度的一半即可:
#circle {
width: 120px;
height: 120px;
background: #7fee1d;
-moz-border-radius: 60px;
-webkit-border-radius: 60px;
border-radius: 60px;
}
- 2
制作椭圆形:
椭圆形是正圆形的一个变体,同样使用一个带ID的div来制作
<div id="oval"></div>
设置椭圆形的CSS时,高度要设置为宽度的一半,border-radius属性也要做相应的改变:
#oval {
width: 200px;
height: 100px;
background: #e9337c;
-webkit-border-radius: 100px / 50px;
-moz-border-radius: 100px / 50px;
border-radius: 100px / 50px;
}
- 3
制作三角形:
要创建一个CSS三角形,需要使用border,通过设置不同边的透明效果,我们可以制作出三角形的现状。另外,在制作三角形时,宽度和高度要设置为0。
<div id="triangle"></div>
#triangle {
width: 0;
height: 0;
border-bottom: 140px solid #fcf921;
border-left: 70px solid transparent;
border-right: 70px solid transparent;
}
- 4
制作倒三角形:
与正三角形不同的是,倒三角形要设置的是border-top、border-left和border-right三条边的属性:
#triangle {
width: 0;
height: 0;
border-top: 140px solid #20a3bf;
border-left: 70px solid transparent;
border-right: 70px solid transparent;
}
- 5
制作左三角形:
左三角形操作的是border-top、border-left和border-right三条边的属性,其中上边和下边要设置透明属性。
#triangle_left {
width: 0;
height: 0;
border-top: 70px solid transparent;
border-right: 140px solid #6bbf20;
border-bottom: 70px solid transparent;
}
- 6
制作菱形
制作菱形的方法有很多种。这里使用的是transform属性和rotate相结合,使两个正反三角形上下显示。
#diamond {
width: 120px;
height: 120px;
background: #1eff00;
/* Rotate */
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
/* Rotate Origin */
-webkit-transform-origin: 0 100%;
-moz-transform-origin: 0 100%;
-ms-transform-origin: 0 100%;
-o-transform-origin: 0 100%;
transform-origin: 0 100%;
margin: 60px 0 10px 310px;
}
- 7
制作梯形:
梯形是三角形的一个变体,设置CSS梯形时,左右两条边设置为相等,并且给它设置一个宽度。
#trapezium {
height: 0;
width: 120px;
border-bottom: 120px solid #ec3504;
border-left: 60px solid transparent;
border-right: 60px solid transparent;
}
- 8
制作平行四边形:
平行四边形的制作方式是使用transform属性使长方形倾斜一个角度。
#parallelogram {
width: 160px;
height: 100px;
background: #8734f7;
-webkit-transform: skew(30deg);
-moz-transform: skew(30deg);
-o-transform: skew(30deg);
transform: skew(30deg);
}
- 9
星形:
星形的HTML结构同样使用一个带ID的空div。星形的实现方式比较复杂,主要是使用transform属性来旋转不同的边。仔细体会下面的代码。
#star {
width: 0;
height: 0;
margin: 50px 0;
color: #fc2e5a;
position: relative;
display: block;
border-right: 100px solid transparent;
border-bottom: 70px solid #fc2e5a;
border-left: 100px solid transparent;
-moz-transform: rotate(35deg);
-webkit-transform: rotate(35deg);
-ms-transform: rotate(35deg);
-o-transform: rotate(35deg);
}
#star:before {
height: 0;
width: 0;
position: absolute;
display: block;
top: -45px;
left: -65px;
border-bottom: 80px solid #fc2e5a;
border-left: 30px solid transparent;
border-right: 30px solid transparent;
content: '';
-webkit-transform: rotate(-35deg);
-moz-transform: rotate(-35deg);
-ms-transform: rotate(-35deg);
-o-transform: rotate(-35deg);
}
#star:after {
content: '';
width: 0;
height: 0;
position: absolute;
display: block;
top: 3px;
left: -105px;
color: #fc2e5a;
border-right: 100px solid transparent;
border-bottom: 70px solid #fc2e5a;
border-left: 100px solid transparent;
-webkit-transform: rotate(-70deg);
-moz-transform: rotate(-70deg);
-ms-transform: rotate(-70deg);
-o-transform: rotate(-70deg);
}
- 10
六角星形:
和五角星的制作方法不同,六角星形状的制作方法是操纵border属性来制作两半图形,然后合并它们。
#star_six_points {
width: 0;
height: 0;
display: block;
position: absolute;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid #de34f7;
margin: 10px auto;
}
#star_six_points:after {
content: "";
width: 0;
height: 0;
position: absolute;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-top: 100px solid #de34f7;
margin: 30px 0 0 -50px;
}
- 11
六边形:
六边形的制作方法可以有很多种,可以像五边形一样,先制作一个长方形,然后在它的上面和下面各放置一个三角形。
#hexagon {
width: 100px;
height: 55px;
background: #fc5e5e;
position: relative;
margin: 10px auto;
}
#hexagon:before {
content: "";
width: 0;
height: 0;
position: absolute;
top: -25px;
left: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 25px solid #fc5e5e;
}
#hexagon:after {
content: "";
width: 0;
height: 0;
position: absolute;
bottom: -25px;
left: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-top: 25px solid #fc5e5e;
}
- 12
心形:
心形的制作是非常复杂的,可以使用伪元素来制作,分别将伪元素旋转不同的角度,并修改transform-origin属性来元素的旋转中心点。
#heart {
position: relative;
}
#heart:before,#heart:after {
content: "";
width: 70px;
height: 115px;
position: absolute;
background: red;
left: 70px;
top: 0;
-webkit-border-radius: 50px 50px 0 0;
-moz-border-radius: 50px 50px 0 0;
border-radius: 50px 50px 0 0;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
-webkit-transform-origin: 0 100%;
-moz-transform-origin: 0 100%;
-ms-transform-origin: 0 100%;
-o-transform-origin: 0 100%;
transform-origin: 0 100%;
}
#heart:after {
left: 0;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
-webkit-transform-origin: 100% 100%;
-moz-transform-origin: 100% 100%;
-ms-transform-origin: 100% 100%;
-o-transform-origin: 100% 100%;
transform-origin: 100% 100%;
}
- 13
蛋形:
蛋形时椭圆形的一个变体,它的高度要比宽度稍大,并且设置正确的border-radius属性即可以制作出一个蛋形。
#egg {
width: 136px;
height: 190px;
background: #ffc000;
display: block;
-webkit-border-radius: 63px 63px 63px 63px / 108px 108px 72px 72px;
border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
}
- 14
无穷符号:
无穷符号可以通过border属性和设置伪元素的角度来实现。
#infinity {
width: 220px;
height: 100px;
position: relative;
}
#infinity:before,#infinity:after {
content: "";
width: 60px;
height: 60px;
position: absolute;
top: 0;
left: 0;
border: 20px solid #06c999;
-moz-border-radius: 50px 50px 0;
border-radius: 50px 50px 0 50px;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
}
#infinity:after {
left: auto;
right: 0;
-moz-border-radius: 50px 50px 50px 0;
border-radius: 50px 50px 50px 0;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
- 15
消息提示框:
消息提示框可以先制作一个圆角矩形,然后在需要的地方放置一个三角形。
#comment_bubble {
width: 140px;
height: 100px;
background: #088cb7;
position: relative;
-moz-border-radius: 12px;
-webkit-border-radius: 12px;
border-radius: 12px;
}
#comment_bubble:before {
content: "";
width: 0;
height: 0;
right: 100%;
top: 38px;
position: absolute;
border-top: 13px solid transparent;
border-right: 26px solid #088cb7;
border-bottom: 13px solid transparent;
}
CSS3绘制各种常见图形(圆形-椭圆形-三角形-五角星...)相关推荐
- 利用matlab绘制简单IFS图形(Sierpinski三角形和BarnsleyFern巴恩斯利蕨)
利用matlab绘制简单IFS图形(Sierpinski谢尔宾斯基三角形和BarnsleyFern巴恩斯利蕨) 一.SierpinskiTriangle谢尔宾斯基三角形 谢尔宾斯基三角形(英语:Sie ...
- css3控制html中图片,精选4款用纯CSS3绘制的有趣图形
今天我们要来分享一些设计非常独特的人物和动物动画效果,它们都是通过HTML5和CSS3制作而成,有一些动画是利用纯CSS3实现的,一起来看看. 1.纯CSS3绘制可爱的蚱蜢 今天我们要分享一个利用纯C ...
- 【CSS】css3绘制各种形状图形三角形,菱形,五角星,椭圆等
1.制作圆形: 要使用CSS来制作一个圆形,我们需要一个div,被给它设置一个ID <div id="ang"></div> 圆形在设置CSS时要设置宽度 ...
- css3:绘制android3蜂巢Honeycomb
之前写过一个类似的,css3绘制android机器人图形.谷歌最近发布了android3,这次的图形挺好看的,很多地方都用到圆角,所以就想到用css3来实现.点击观看演示 隔天再做了些修改,比之前的好 ...
- 用CSS绘制最常见的40种形状和基本图形
今天在国外的网站上看到了很多看似简单却又非常强大的纯CSS绘制的图形,里面有最简单的矩形.圆形和三角形,也有各种常见的多边形,甚至是阴阳太极和网站小图标,真的非常强大,分享给大家. Square(正方 ...
- CSS3绘制不规则图形(一)
由于近期的项目中出现了不规则的边框和图形, 所以只好提前先温习一下,以前收集的一些CSS3绘制的图形...样式绘制的图形比图片的性能要好,体验更佳. 废话不多说,我们直接看效果: 1.三角形系列(三角 ...
- CSS3文本居中显示、圆形圆角绘制、立体阴影效果设置实例演示
CSS3文本居中显示.圆形圆角绘制.立体阴影效果设置 实例演示 ① 文本居中显示 ② 圆角设置 ③ 圆形设置 ④ 立体阴影效果设置 [ 推荐文章 ] 一篇文章快速掌握 Linux 基本命令 实例演示 ...
- 数据分析基础学习_Matplotlib_常见图形及绘制(折线图/散点图/柱状图/直方图/饼图)
1.3 常见图形及绘制 matplotlib可以绘制折线图.散点图.柱状图.直方图.饼图 1.3.1 常见图形种类及意义 折线图:以折线的上升或下降来表示统计量的增减变化的统计图 特点:可以显示数据的 ...
- Java绘制图形(正方形/三角形/圆/网以及填充颜色)
Java绘制图形(正方形/三角形/圆/网以及填充颜色) 首先用EasyGraphics确定图片大小 然后用setcolor来设置图象主题颜色 也可以给特定大的点设置颜色 例如: g.setColor( ...
- Matplotlib常见图形绘制(折线图、散点图、柱状图、直方图、饼图)
Matplotlib能够绘制折线图.散点图.柱状图.直方图.饼图. 我们需要知道不同的统计图的意义,以此来决定选择哪种统计图来呈现我们的数据. 1 常见图形种类及意义 折线图:以折线的上升或下降来表示 ...
最新文章
- android入门程序源代码,安卓程序开发入门
- Catalan卡塔兰数
- linux关闭gvim命令,Linux 下 8 种退出 vim 编辑器的方法
- java bean spring_JavaBean和Spring bean傻傻分不清楚
- 分析了2.2W条抖音数据,发现“95后”其实很养生……
- transact-sql_如何使用Transact-SQL创建,配置和删除SQL Server链接服务器
- 阶段3 3.SpringMVC·_07.SSM整合案例_01.ssm整合说明
- 函数 tostring_QDate、QTime、QDateTime的相关函数说明
- 《暗黑3》是如何设计随机地下城的?
- python 谷歌翻译 api_调用谷歌翻译API
- python分词原理_结巴分词原理
- 延安.居民家庭计算机普及率,2004~2014年家庭互联网普及率及电脑持有率
- python 输入一个整数,将该整数逆向输出
- 超简单 图解 三级域名解析
- oce专项认证 oracle_Oracle Certification Program | Oracle 中国
- 国密算法 SM4 对称加密 分组密码 python实现完整代码
- 90+目标跟踪算法九大benchmark!基于判别滤波器和孪生网络的视觉目标跟踪:综述与展望...
- 卡塔尔是一个什么样的国家?
- Lnux-组-用户管理
- 如何成为数据分析师系列(二):可视化图表进阶