【01】CSS制作的图形
2024-09-08 07:24:48
【01】CSS制作的图形
绘制五角星:
通过border绘制三角形。然后通过transfrom来旋转35度。
绘制对称的图形,最后绘制顶部的三角形即可。
元素本身,加上:before和:after。
绘制爱心:
矩形,加圆角,加旋转。
绘制倒8:
显然是:三个角是圆角。然后旋转。
绘制开心笑:
四个角圆角。然后右border-right为透明即可。
代码如下:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<title>测试</title>
<style type="text/css">
*{
margin:0;
padding:0;
border:0;
}
.wrap {
position: absolute;
}
.arrow {
position: relative;
width:0;
height:0;
border-top:9px solid transparent;
border-right:9px solid #000;
-webkit-transform: rotate(10deg);
-moz-transform: rotate(10deg);
-ms-transform: rotate(10deg);
-o-transform: rotate(10deg);
}
.arrow:after {
content:"";
position: absolute;
border:0 solid transparent;
border-top:3px solid #000;
border-radius:20px000;
top:-12px;
left:-9px;
width:12px;
height:12px;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
}
.star-six {
width:0;
height:0;
border-left:50px solid transparent;
border-right:50px solid transparent;
border-bottom:100px solid #99CC33;
position: relative;
}
.star-six:after {
width:0;
height:0;
border-left:50px solid transparent;
border-right:50px solid transparent;
border-top:100px solid #99CC33;
position: absolute;
content:"";
top:30px;
left:-50px;
}
.star-five {
margin:50px0;
position: relative;
display: block;
color:#0066CC;
width:0px;
height:0px;
border-right:100px solid transparent;
border-bottom:70px solid #0066CC;
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 #0066CC;
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:#0066CC;
top:3px;
left:-105px;
width:0px;
height:0px;
border-right:100px solid transparent;
border-bottom:70px solid #0066CC;
border-left:100px solid transparent;
-webkit-transform: rotate(-70deg);
-moz-transform: rotate(-70deg);
-ms-transform: rotate(-70deg);
-o-transform: rotate(-70deg);
content:'';
}
.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:50px50px00;
border-radius:50px50px00;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
-webkit-transform-origin:0100%;
-moz-transform-origin:0100%;
-ms-transform-origin:0100%;
-o-transform-origin:0100%;
transform-origin:0100%;
}
.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%;
}
.infinity {
position: relative;
width:212px;
height:100px;
}
.infinity:before,
.infinity:after {
content:"";
position: absolute;
top:0;
left:0;
width:60px;
height:60px;
border:20px solid #FF33CC;
-moz-border-radius:50px50px050px;
border-radius:50px50px050px;
-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:50px50px50px0;
border-radius:50px50px50px0;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
.pacman {
width:0px;
height:0px;
border-right:60px solid transparent;
border-top:60px solid #FFCC00;
border-left:60px solid #FFCC00;
border-bottom:60px solid #FFCC00;
border-top-left-radius:60px;
border-top-right-radius:60px;
border-bottom-left-radius:60px;
border-bottom-right-radius:60px;
}
.yin-yang {
width:96px;
height:48px;
background:#fff;
border-color:#000;
border-style: solid;
border-width:2px2px50px2px;
border-radius:100%;
position: relative;
}
.yin-yang:before {
content:"";
position: absolute;
top:50%;
left:0;
background:#fff;
border:18px solid #000;
border-radius:100%;
width:12px;
height:12px;
}
.yin-yang:after {
content:"";
position: absolute;
top:50%;
left:50%;
background:#000;
border:18px solid #fff;
border-radius:100%;
width:12px;
height:12px;
}
</style>
</head>
<body>
<div class="wrap" style="top:30px; left:40px;">
<div class="arrow"></div>
</div>
<div class="wrap" style="top:20px; left:100px;">
<div class="star-six"></div>
</div>
<div class="wrap" style="top:20px; left:200px;">
<div class="star-five"></div>
</div>
<div class="wrap" style="top:20px; left:400px;">
<div class="heart"></div>
</div>
<div class="wrap" style="top:220px; left:100px;">
<div class="infinity"></div>
</div>
<div class="wrap" style="top:220px; left:400px;">
<div class="pacman"></div>
</div>
<div class="wrap" style="top:340px; left:200px;">
<div class="yin-yang"></div>
</div>
</body>
</html>
最新文章
- Powerdesigner SqlServer转Oracle(转)
- xwamp 目录结构设计
- Collection、Map、数组 遍历方式
- Gym 100971D Laying Cables 单调栈
- C# \uxxx Unicode编码解码
- 在Ubuntu Linux下怎样安装QQ
- JDBC与javaBean
- 我用Cocos2d-x模拟《Love Live!学院偶像祭》的Live场景(五)
- HTML表单设计(上)
- Mac下持久化路由配置
- ESP32 Eclipse开发环境构建与问题总结
- 第二阶段第三次spring会议
- A - 不要62 HDU - 2089
- UVa LA 4254 - Processor 二分,贪心 难度: 1
- enq: TM - contention一例
- SIMD指令集——一条指令操作多个数,SSE,AVX都是,例如:乘累加,Shuffle等
- Codeforces822 B. Crossword solving
- python 判断字符串是否以数字结尾
- 【VUE+laravel5.4】vue给http请求 添加请求头数据
- secureCRT下linux rz命令上传文件失败或变小(破损)的问题解决方法
热门文章
- 百度上传组件 WebUploader
- bzoj 1801: [Ahoi2009]chess 中国象棋【dp】
- 乐搏讲自动化测试-python语言特点及优缺点(5)
- 添加tomcat开机启动服务时报错:Neither the JAVA_HOME nor the JRE_HOME enviromment variable is defined
- Redis集群创建和配置
- 数据结构之顺序队列(C实现)
- CSS 样式的优先级小结
- Geoserver常见问题总结
- 查询编辑器便捷特性【MSSQL】
- 重构27-Remove God Classes(去掉神类)