html css 怎么画星形,使用CSS如何绘制五角星?(附代码)
下面本篇文章给大家介绍一下如何使用纯CSS绘制五角星、六角形、五边形、六边形、心形。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。
1、五角星
#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: '';
}
2、六角形
#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;
}
3、五边形
#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;
}
4、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;
}
5、多边形
#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;
}
6、心形
#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%;
}
更多炫酷CSS3、html5、javascript特效代码,尽在:js特效大全
html css 怎么画星形,使用CSS如何绘制五角星?(附代码)相关推荐
- js和css动态画出一只安卓机器人,附代码
此效果上网的时候看到的,觉得有趣新奇,于是立马F12查看源代码,平时习惯于操作body标签中的元素,忽视了除body标签中之外的标签 ,殊不知style标签也能这么玩 实现原理: 通过js,定时的逐个 ...
- php开发愤怒的小鸟,如何使用纯CSS实现一只黑色的愤怒小鸟(附代码)
本篇文章给大家带来的内容是关于如何使用纯CSS实现一只黑色的愤怒小鸟(附代码),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 效果预览 源代码下载 https://github.co ...
- php输出熊猫图案,如何用CSS实现一只带帽子的大熊猫(附代码)
本篇文章给大家带来的内容是关于如何用CSS实现一只带帽子的大熊猫(附代码),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 黑眼圈的大熊猫可谓非常可爱,今天就用CSS实现以下萌萌哒的大 ...
- 双飞翼 html 布局,css实现双飞翼布局的四种方法(附代码)
本篇文章给大家带来的内容是关于css实现双飞翼布局的四种方法(附代码),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 圣杯布局.双飞翼布局效果图 从效果图来看圣杯布局.双飞翼布局效果 ...
- CSS如何画一个三角形 + CSS如何画月亮
1.CSS画三角形 利用border属性就可以 . 原理如下: 给一个元素设置宽高都为0, width: 0px; height: 0px; 然后元素的 ...
- css制作炫酷的罗盘时钟特效(附代码)
效果图 然后是代码 <!DOCTYPE html> <html lang="en"><head><meta charset="U ...
- 如何在科研论文中画出漂亮的插图?(附代码)
来源:机器学习实验室 本文约3300字,建议阅读5分钟. 本文给大家推荐几种在论文中画出漂亮的插图的方法. 方法一 强烈推荐 Python 的绘图模块 matplotlib: python plott ...
- python代码画土拨鼠_万圣节快到了,让我们用Python画一只蝙蝠图表吧(附代码)...
本文的文字及图片来源于网络,仅供学习.交流使用,不具有任何商业用途,版权归原作者所有,如有问题请及时联系我们以作处理 以下文章来源于可以叫我才哥 ,作者小乐老师 前言 万圣节来啦! 今天带给大家一个简 ...
- php画奥运五环颜色,canvas绘制奥运五环代码分享
运行效果: A drawing of someing! context.lineWidth = 7; context.strokeStyle = '#0180C3'; context.beginPat ...
- 线上赏樱花5分钟教你用Python:画一棵漂亮的樱花树(附代码)
由于疫情原因,不能聚集游玩,如今春天到来,武大的樱花已经盛开了,所以很多平台都开通了线上赏樱花,跟随镜头带你云上赏樱花! 东湖樱园在梅园的斜对面,占地150多亩,与日本弘前樱花园.美国华盛顿州樱花园并 ...
最新文章
- 菜鸟学SSH(十二)——Hibernate与Spring配合生成表结构
- Little Sub and Game
- vue 二进制文件的下载(解决乱码和解压报错)
- 斐波那契数列的性质整理
- MyBatis3源码解析(7)TypeHandler注册与获取
- Charles抓包工具实战教程(完结)
- 截止到 2019 年 6 月 14 日在 LeetCode 中文版上写的题解
- 特征级融合_自动驾驶系统入门(七)- 多传感器信息融合(MSIF)
- vue中基于echarts和基于高德地图的两种地图下钻与上浮方式
- 学习倍福BECKHOFF PLC可利用的资源
- 数据库--------代数运算和关系运算
- Mysql 安装,及其闪退的问题解决
- MathorCup大数据竞赛B题Baseline(持续更新)
- 标签云制作工具wordart的注册登录页面介绍
- Python全栈 Linux基础之1.Linux初章
- CCF系列题解--2016年9月第二题 火车购票
- MCU DC-DC数控电源
- MR实现reduce join和map join及hive的执行计划
- python实现小说阅读器
- IT培训机构出来的学生之我见闻