html css 画五角星,纯 CSS3 绘制图形(心形、五角星、六边形等)
这篇文章给大家带来的是纯 CSS 绘制五角星、六角形、五边形、六边形、心形等等。我们的网页因为 CSS 而呈现千变万化的风格。这一看似简单的样式语言在使用中非常灵活,只要你发挥创意就能实现很多比人想象不到的效果。特别是随着 CSS3 的广泛使用,更多新奇的 CSS 作品涌现出来。
Star (6-points)
#star-six {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid red;
position: relative;
}
#star-six:after {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-top: 100px solid red;
position: absolute;
content: "";
top: 30px;
left: -50px;
}
Star (5-points)
#star-five {
margin: 50px 0;
position: relative;
display: block;
color: red;
width: 0px;
height: 0px;
border-right: 100px solid transparent;
border-bottom: 70px solid red;
border-left: 100px solid transparent;
-moz-transform: rotate(35deg);
-webkit-transform: rotate(35deg);
-ms-transform: rotate(35deg);
-o-transform: rotate(35deg);
}
#star-five:before {
border-bottom: 80px solid red;
border-left: 30px solid transparent;
border-right: 30px solid transparent;
position: absolute;
height: 0;
width: 0;
top: -45px;
left: -65px;
display: block;
content: "";
-webkit-transform: rotate(-35deg);
-moz-transform: rotate(-35deg);
-ms-transform: rotate(-35deg);
-o-transform: rotate(-35deg);
}
#star-five:after {
position: absolute;
display: block;
color: red;
top: 3px;
left: -105px;
width: 0px;
height: 0px;
border-right: 100px solid transparent;
border-bottom: 70px solid red;
border-left: 100px solid transparent;
-webkit-transform: rotate(-70deg);
-moz-transform: rotate(-70deg);
-ms-transform: rotate(-70deg);
-o-transform: rotate(-70deg);
content: "";
}
Pentagon
#pentagon {
position: relative;
width: 54px;
border-width: 50px 18px 0;
border-style: solid;
border-color: red transparent;
}
#pentagon:before {
content: "";
position: absolute;
height: 0;
width: 0;
top: -85px;
left: -18px;
border-width: 0 45px 35px;
border-style: solid;
border-color: transparent transparent red;
}
Hexagon
#hexagon {
width: 100px;
height: 55px;
background: red;
position: relative;
}
#hexagon:before {
content: "";
position: absolute;
top: -25px;
left: 0;
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 25px solid red;
}
#hexagon:after {
content: "";
position: absolute;
bottom: -25px;
left: 0;
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-top: 25px solid red;
}
Octagon
#octagon {
width: 100px;
height: 100px;
background: red;
position: relative;
}
#octagon:before {
content: "";
position: absolute;
top: 0;
left: 0;
border-bottom: 29px solid red;
border-left: 29px solid #eee;
border-right: 29px solid #eee;
width: 42px;
height: 0;
}
#octagon:after {
content:"";
position: absolute;
bottom: 0;
left: 0;
border-top: 29px solid red;
border-left: 29px solid #eee;
border-right: 29px solid #eee;
width: 42px;
height: 0;
}
Heart
#heart {
position: relative;
width: 100px;
height: 90px;
}
#heart:before,
#heart:after {
position: absolute;
content: "";
left: 50px;
top: 0;
width: 50px;
height: 80px;
background: red;
-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%;
}
大家有什么问题或技术上的想法可以在此与大家分享,也可以加入前端爱好者QQ群(141999928)一起学习进步:【幸凡前端技术交流群】
0
如果您觉得本文的内容对您的学习有所帮助,捐赠与共勉,支付宝(左)或微信(右)
html css 画五角星,纯 CSS3 绘制图形(心形、五角星、六边形等)相关推荐
- 气泡提示效果css.html,用纯CSS3绘制高端简约的气泡提示框
用纯css绘制一个简单的气泡提示框,对于长期关注课课家CSS3绘图教程的朋友来说是件轻而易举的事,但是程序员最不喜欢做的事情是重复造轮子,加上之前小编分享的几个气泡要么过于复杂,通用性不强,要么需要鼠 ...
- 纯css画梯形,纯CSS3实现的梯形立方体
CSS 语言: CSSSCSS 确定 html, body { position: relative; width: 100%; height: 100%; margin: 0; background ...
- css3控制html中图片,精选4款用纯CSS3绘制的有趣图形
今天我们要来分享一些设计非常独特的人物和动物动画效果,它们都是通过HTML5和CSS3制作而成,有一些动画是利用纯CSS3实现的,一起来看看. 1.纯CSS3绘制可爱的蚱蜢 今天我们要分享一个利用纯C ...
- 用纯CSS3绘制萌系漫画人物动态头像
大家已经见惯了用CSS3画的图标.LOGO.头像,这次台湾同学Rei给我们带来了用纯CSS3绘制的日本动漫<轻音少女>女主角秋山澪的动态头像.看到动图我震惊了!!!CSS3的强大再次霸气测 ...
- html流光效果图,利用纯CSS3绘制html网页流光文字
对于流光文字,大家并不陌生,毕竟我们都经历过非主流的时代.00后的请退避.你们卟懂绯紸流!因为你们毕竟是杀马特贵族!!比我们高贵. 还记得那些炫酷的签名档,或者那些炫酷的动态头像.当年可是卖到十几块钱 ...
- Python pyglet 自制3D引擎入门(二) -- 绘制立体心形,动画和相机控制
Python作为目前较广泛的编程语言, 用于制作3D游戏可谓得心应手.本文讲解使用Python pyglet库自制简易3D引擎的方法技巧. 上篇:Python pyglet 自制3D引擎入门(一) – ...
- 【matlab】 动态绘制三维心形图
[转载]matlab动态绘制三维心形图 matlab动态绘制三维心形图程序如下,核心是isosurface函数,verts存储了心形曲面各点的坐标,而faces存储了各点的连接顺序. clear fi ...
- html5 css3画八卦图,用纯CSS3绘制乾坤八卦图
乾坤八卦图衍生自中国古代的<河图>与<洛书>,伏羲根据燧人氏造设的这两幅星图所作.其形状经过抽象以后,成为对称感相当强的几何图形,无论是黑白两色还是形状,都非常地平衡和稳重. ...
- css百度图片布局,css3绘制百度的小度熊
前几天看到一篇文章是写用css3绘制腾讯企鹅的.趁着今天有空,就用css3来写一个百度的小度熊.话不多说,开始上码. 爆照 先来一张呆萌小度熊的成果照. 在绘制小度熊之前,首先要对小度熊布局上进行一个 ...
最新文章
- GitHub上最励志的计算机自学教程
- ubuntu解决eclipse中logcat只显示level栏
- c语言程序转换成单片机语言,单片机编程常用到的类型转换 C语言程序实现
- 怎样将html转换do,html代码格式化 Reddo的教程
- 64位系统安装ODBC驱动的方法
- python选项卡中文详细说明_pycharm窗口选项卡管理
- 带你认识FusionInsight Flink:既能批处理,又能流处理
- 阿里百度旷视商汤京东,AI大厂怎么看产业实践?
- JSP概述与运行原理
- 【微信小程序生成海报保存到相册】
- 【python】 实现排列组合公式
- 小型双轮差速底盘实现触须避障
- 总结一波 Redis 面试题,收藏起来!
- unity应用实例——从头撸一个全新的FPS游戏(5)
- 解决小程序-wx.canvasGetImageData()-RGB取色盘苹果手机获取颜色慢问题
- 机器学习的几个重要问题
- mysql 汉字一排序规则_MySQL 的字符集与排序规则
- 2021UpdateC#.NET笔试题高级进阶篇
- cocos creator jsc 逆向解码为js
- 【信号采集】基于FPGA的高速信号采集系统
热门文章
- synchronized同步方法
- MyBatis 集成到Spring 的原理是什么?
- maven依赖管理的概念
- Servlet_生命周期详解
- Bootstrap全局css样式_表单
- java.lang.unsatisfiedlinkerror:_java.lang.UnsatisfiedLinkError: 的问题
- jsonp java后台_jsonp与Java后端
- beta分布_浅谈脑电的beta频段振荡
- 动态数组vector
- 关于myeclipse buildpath的jar包不能复制到tomcat lib下的问题