【CSS】绘制各种图形实例
2017-02-09 17:55
716 查看
【CSS】绘制各种图形实例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" name="viewport" />
<title>纯CSS绘制各种图形实例</title>
<style>
/*css reset */
body { margin: 0; background: #eeffe5;}
div { margin-top: 100px;}
div:hover { box-shadow: 0 0 8px #d5d5d5; }
.wrapper {
width: 80%;
margin: 0 auto;
box-shadow: none !important;
}
.zheng {
width: 100px;
height: 100px;
background: #f33;
}
.yuan {
width: 100px;
height: 100px;
background: #f33;
border-radius: 55%;
}
.tuo {
width: 150px;
height: 100px;
background: #f33;
border-radius: 55%;
}
.dengyao△1 {
width: 0;
height: 0;
border: 70px solid transparent;
border-bottom: 70px solid #f33;
}
.dengyao△2 {
width: 0;
height: 0;
border-top: 100px solid transparent;
border-left: 100px solid #f33;
}
.dengyao△3 {
width: 0;
height: 0;
border-top: 100px solid #f33;
border-right: 100px solid transparent;
}
.dengyao△4 {
width: 0;
height: 0;
border: 70px solid transparent;
border-top: 70px solid #f33;
}
.△5 {
width: 0;
height: 0;
border: 70px solid transparent;
border-left: 100px solid #f33;
}
.△6 {
width: 0;
height: 0;
border: 60px solid transparent;
border-left: 80px solid #f33;
border-right: 80px solid #f33;
}
.pingxin {
width: 140px;
height: 80px;
background: #f33;
-moz-transform: skew(13deg,0deg);
-webkit-transform: skew(13deg,0deg);
-ms-transform: skew(13deg,0deg); /*ie9*/
transform: skew(13deg,0deg);
}
.tixin {
width: 100px;
height: 0;
border: 30px solid transparent;
border-bottom: 80px solid #f33;
}
.tixin2 {
width: 100px;
height: 0;
border: 30px solid transparent;
border-top: 80px solid #f33;
}
.yuanjiao {
width: 100px;
height: 100px;
background: #f33;
border-radius: 10px;
}
.yuanjiao2 {
width: 100px;
height: 100px;
background: #f33;
border-radius: 20px 0 20px 0;
}
.yuanjiao3 {
width: 100px;
height: 100px;
background: #f33;
border-radius: 0 20px 0 20px;
}
.yuanjiao4 {
width: 100px;
height: 100px;
background: #f33;
border-radius: 40px 40px 40px 40px / 20px 20px 20px 20px;
}
.yuanjiao5 {
width: 100px;
height: 100px;
background: #f33;
border-radius: 25px 25px 25px 25px / 40px 40px 40px 40px;
}
.shuqian1 {
width: 150px;
height: 0;
border-right: 40px solid transparent;
border-bottom: 40px solid #f33;
}
.shuqian2 {
width: 150px;
height: 0;
border-top: 20px solid #f33;
border-bottom: 20px solid #f33;
border-right: 30px solid transparent;
}
.huan1 {
width: 100px;
height: 100px;
background: transparent;
border: 7px solid #f33;
border-radius: 55%;
}
.huan2 {
width: 200px;
height: 100px;
background: transparent;
border: 5px solid #f33;
border-radius: 10px;
}
.heart {
position: relative;
width: 100px;
height: 90px;
}
.heart:before,.heart:after {
position: absolute;
content: "";
left: 50px;
top: 0;
width: 50px;
height: 80px;
background: #f33;
-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%; /*css终极hack*/
}
.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%;
}
.talkbubble {
width: 120px;
height: 80px;
background: #f33;
position: relative;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
}
.talkbubble:before {
content:"";
position: absolute;
right: 100%;
top: 26px;
width: 0;
height: 0;
border-top: 13px solid transparent;
border-right: 26px solid #f33;
border-bottom: 13px solid transparent;
}
.taiji {
width: 96px;
height: 48px;
background: #f8f8f8;
border-color: #f33;
border-style: solid;
border-width: 2px 2px 50px 2px;
border-radius: 100%;
position: relative;
}
.taiji:before {
content: "";
position: absolute;
top: 50%;
left: 0;
background: #f8f8f8;
border: 18px solid #f33;
border-radius: 100%;
width: 12px;
height: 12px;
}
.taiji:after {
content: "";
position: absolute;
top: 50%;
left: 50%;
background: #f33;
border: 18px solid #f8f8f8;
border-radius:100%;
width: 12px;
height: 12px;
}
.moon {
width: 150px;
height: 150px;
border-radius: 55%;
box-shadow: 15px 15px 0 1px #f33;
}
.search {
width: 40px;
height: 40px;
background: transparent;
border-radius: 55%;
border: 2px solid #f33;
position: relative;
box-sizing: content-box;
}
.search:before {
display: inline-block;
content: '';
width: 22px;
height: 3px;
background: #f33;
position: absolute;
top: 41px;
left: 31px;
-moz-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
box-sizing: content-box;
}
.btn-submit {
display: block;
width: 42px;
height: 35px;
position: relative;
}
.btn-submit:before {
display: block;
content: "";
width: 12px;
height: 12px;
border: 2px solid #999;
border-radius: 20px;
background: transparent;
position: absolute;
left: 10px;
top: 7px;
box-sizing: content-box;
}
.btn-submit:after {
display: block;
content: '';
width: 10px;
height: 2px;
background: #999;
position: absolute;
top: 22px;
left: 21px;
-moz-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
box-sizing: content-box;
}
.wujiao {
margin:50px 0;
position:relative;
display:block;
color:#f33;
width:0px;
height:0px;
border-right:100px solid transparent;
border-bottom:70px solid #f33;
border-left:100px solid transparent;
-moz-transform:rotate(35deg);
-webkit-transform:rotate(35deg);
-ms-transform:rotate(35deg);
-o-transform:rotate(35deg);
}
.wujiao:before {
border-bottom:80px solid #f33;
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);
}
.wujiao:after {
position:absolute;
display:block;
color:#f33;
top:3px;
left:-105px;
width:0px;
height:0px;
border-right:100px solid transparent;
border-bottom:70px solid #f33;
border-left:100px solid transparent;
-webkit-transform:rotate(-70deg);
-moz-transform:rotate(-70deg);
-ms-transform:rotate(-70deg);
-o-transform:rotate(-70deg);
content:'';
}
.wubian {
position: relative;
width: 54px;
border-width: 50px 18px 0;
border-style: solid;
border-color: #f33 transparent;
}
.wubian:before {
content: "";
position: absolute;
height: 0;
width: 0;
top: -85px;
left: -18px;
border-width: 0 45px 35px;
border-style: solid;
border-color: transparent transparent #f33;
}
.yuanque {
width: 0;
height: 0;
border: 50px solid #f33;
border-radius: 55%;
border-right: 50px solid transparent;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="zheng" title="正方形"></div>
<div class="yuan" title="圆形"></div>
<div class="tuo" title="椭圆"></div>
<div class="dengyao△1" title="等腰直角三角形1"></div>
<div class="dengyao△2" title="等腰直角三角形2"></div>
<div class="dengyao△3" title="等腰直角三角形3"></div>
<div class="dengyao△4" title="等腰直角三角形4"></div>
<div class="△5"></div>
<div class="△6"></div>
<div class="pingxin"></div>
<div class="tixin"></div>
<div class="tixin2"></div>
<div class="yuanjiao"></div>
<div class="yuanjiao2"></div>
<div class="yuanjiao3"></div>
<div class="yuanjiao4"></div>
<div class="yuanjiao5"></div>
<div class="shuqian1"></div>
<div class="shuqian2"></div>
<div class="moon"></div>
<div class="huan1"></div>
<div class="huan2"></div>
<div class="heart"></div>
<div class="talkbubble"></div>
<div class="taiji"></div>
<div class="search"></div>
<div class="btn-submit"></div>
<div class="wujiao"></div>
<div class="wubian"></div>
<div class="yuanque"></div>
<div class=""></div>
</div>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- CSS 魔法系列：纯 CSS 绘制图形（各种形状的钻石）
- CSS 魔法系列：纯 CSS 绘制各种图形《系列六》
- css 绘制各种图形
- 【PyQt4 实例5】利用QPainter绘制各种图形
- 利用CSS进行各种图形的绘制
- css绘制各种图形，三角形，长方形，梯形
- matlab画图入门篇--各种基本图形绘制的函数与实例【转载】
- CSS代码实例:用CSS代码写出的各种形状图形
- PyQt5利用QPainter绘制各种图形的实例
- CSS代码实例:用CSS代码写出的各种形状图形
- 在网上看到一个通过css绘制各种图形的文章留底
- CSS各种图形绘制
- CSS各种图形绘制
- CSS 魔法系列：纯 CSS 绘制各种图形《系列五》
- MATLAB画图入门篇--各种基本图形绘制的函数与实例
- CSS代码实例:用CSS代码写出的各种形状图形
- 基于Visual C#的AutoCAD开发——实例11 绘制基本图形
- CSS滑动门技术实现TAB标签切换效果实例,支持各种浏览器
- CSS滑动门技术实现TAB标签切换效果实例,支持各种浏览器
- Globe中是用OpenGL绘制图形实例