css3绘制各种图形
2019-06-19 本文已影响0人
干炸里脊不如你
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>666</title>
<style>
div{ float:left; margin:20px;}
.preface{ width:100%;
text-align:center;}
/**正方形**/
#square {
width: 100px;
height: 100px;
background: red;
}
/**矩形**/
#rectangle {
width: 200px;
height: 100px;
background: red;
}
/**圆**/
#circle {
width: 100px;
height: 100px;
background: red;
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
border-radius: 50px;
}
/**椭圆**/
#oval {
width: 200px;
height: 100px;
background: red;
-moz-border-radius: 100px / 50px;
-webkit-border-radius: 100px / 50px;
border-radius: 100px / 50px;
}
/**上三角**/
#triangle-up {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid red;
}
/**下三角**/
#triangle-down {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-top: 100px solid red;
}
/**左三角**/
#triangle-left {
width: 0;
height: 0;
border-top: 50px solid transparent;
border-right: 100px solid red;
border-bottom: 50px solid transparent;
}
/**左上三角**/
#triangle-topleft {
width: 0;
height: 0;
border-top: 100px solid red;
border-right: 100px solid transparent;
}
/**右上三角**/
#triangle-topright {
width: 0;
height: 0;
border-top: 100px solid red;
border-left: 100px solid transparent;
}
/**左下三角**/
#triangle-bottomleft {
width: 0;
height: 0;
border-bottom: 100px solid red;
border-right: 100px solid transparent;
}
/**右下三角**/
#triangle-bottomright {
width: 0;
height: 0;
border-bottom: 100px solid red;
border-left: 100px solid transparent;
}
/**梯形**/
#trapezoid {
border-bottom: 100px solid red;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
height: 0;
width: 100px;
}
/**显示对话框**/
#talkbubble {
width: 120px;
height: 80px;
background: red;
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 red;
border-bottom: 13px solid transparent;
}
</style>
</head>
<body>
<h1 class="preface">
今天上午，家里的大媳妇突然问我平行四边形要怎么写，思考了良久~~。
<br/>
过程怎样不重要。特收集平时常用的css3的图形绘制。
<br/>
装逼利器，把妹神器。
<br/>
你值得拥有
</h1>
<div id="square">
z正方形
</div>
<div id="rectangle">
长方形
</div>
<div id="circle">
圆
</div>
<div id="oval">
椭圆
</div>
<div id="triangle-up">
上三角
</div>
<div id="triangle-down">
下三角
</div>
<div id="triangle-left">
左三角
</div>
<div id="triangle-topleft">
左上三角
</div>
<div id="triangle-topright">
右上三角
</div>
<div id="triangle-bottomright">
右下三角
</div>
<div id="triangle-bottomleft">
左下三角
</div>
<div id="trapezoid">
梯形
</div>
<div id="talkbubble">
对话框
</div>
</body>
</html>
