css3 绘制图形
2024-08-29 08:56:50
星形：
.star-six {
width:;
height:;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid yellow;
position: relative;
}
.star-six:after {
width:;
height:;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-top: 100px solid yellow;
position: absolute;
content: "";
top: 30px;
left: -50px;
}
五角星：
.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:;
width:;
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 {
position: relative;
width: 54px;
border-width: 50px 18px 0;
border-style: solid;
border-color: purple transparent;
top:50px;
}
.pentagon:before {
content: "";
position: absolute;
height:;
width:;
top: -85px;
left: -18px;
border-width: 0 45px 35px;
border-style: solid;
border-color: transparent transparent purple;
}
六边形：
.hexagon {
width: 100px;
height: 55px;
background: #6c6;
position: relative;
}
.hexagon:before {
content: "";
position: absolute;
top: -25px;
left:;
width:;
height:;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 25px solid #6c6;
}
.hexagon:after {
content: "";
position: absolute;
bottom: -25px;
left:;
width:;
height:;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-top: 25px solid #6c6;
}
八边形：
.octagon {
width: 100px;
height: 100px;
background: orange;
position: relative;
}
.octagon:before {
content: "";
position: absolute;
top:;
left:;
border-bottom: 29px solid orange;
border-left: 29px solid #fff;
border-right: 29px solid #fff;
width: 42px;
height:;
}
.octagon:after {
content: "";
position: absolute;
bottom:;
left:;
border-top: 29px solid orange;
border-left: 29px solid #fff;
border-right: 29px solid #fff;
width: 42px;
height:;
}
心形：
.heart {
position: relative;
width: 100px;
height: 90px;
}
.heart:before,
.heart:after {
position: absolute;
content: "";
left: 50px;
top:;
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:;
-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%;
}
梯形：
.triangle {
border-bottom: 100px solid #F36823;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
height:;
width: 100px;
}
最新文章
- 从设计到开发，硅谷技术专家教你做“声控”APP
- T-SQL中只截取日期的日期部分和日期的时间部分
- JAVA设计模式之访问者模式
- BZOJ 1452 Count
- IOS 7 Study - Implementing Navigation with UINavigationController
- Google protobuf安装
- MVC 无法将类型“System.Collections.Generic.List<AnonymousType#1>”隐式转换为“System.Collections.Generic.IList<Mvc3Modeltest.Models.Movie>”。存在一个显式转换(是否缺少强制转换？））
- 激活前一个程序（注册全局消息，使用Mutex探测，如果已经占用就广播消息通知第一个程序，然后第一个程序做出响应）
- poj 3287 The Trip, 2007_贪心
- xmlns=""
- 多线程——NSThread
- AngularJS学习笔记3
- 初入前端框架bootstrap--Web前端
- Java并发编程实战 之 线程安全性
- gardner 算法matlab实现
- vue二、脚手架搭建
- js date setInterval 时间 时钟 getFullYear ,JavaScript
- 客户端如何访问访问oracle 12c 64位的数据库
- ReactiveX 学习笔记（22）使用 RxJS + Angular 进行 GUI 编程
- python基础2之字符串、列表、字典、集合