首页 > 代码库 > CSS各种图形绘制
CSS各种图形绘制
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>绘图</title>
<style type="text/css">
div{
background:black;
}
/*绘正方形*/
.square{
width:100px;
height:100px;
}
/*绘长方形*/
.retangle{
width:200px;
height:100px;
}
/*绘图形*/
.cirecle{
width:100px;
height:100px;
border-radius:50px; /*把边框设置为圆角*/
}
/*图柱形*/
.cylinder{
width:100px;
height:100px;
border-radius:100px/50px;
}
/*椭圆形*/
.oval{
width:200px;
height:100px;
border-radius:100px/50px;
}
/*上三角形*/
.tirangle-up{
width:0px;
height:0px;
border-left:50px solid transparent;
border-right:50px solid transparent;
border-bottom:100px solid red;
}
/*下三角形*/
.tirangle-down{
width:0px;
height:0px;
border-left:50px solid transparent;
border-right:50px solid transparent;
border-top:100px solid red;
}
/*平边三角形*/
.tirangle-equal{
width:0px;
height:0px;
border-left:50px solid transparent;
border-right:50px solid transparent;
border-bottom:50px solid red;
}
/*左边三角形*/
.tirangle-left{
width:0px;
height:0px;
border-top:50px solid transparent;
border-right:100px solid red;
border-bottom:50px solid transparent;
}
/*右边三角形*/
.tirangle-right{
width:0px;
height:0px;
border-top:50px solid transparent;
border-left:100px solid red;
border-bottom:50px solid transparent;
}
/*左上三角形*/
.tirangle-left-up{
width:0px;
height:0px;
border-top:100px solid red;
border-right:200px solid transparent;
}
/*右上三角形*/
.tirangle-right-up{
width:0px;
height:0px;
border-top:100px solid red;
border-left:200px solid transparent;
}
/*左下三角形*/
.tirangle-left-down{
width:0px;
height:0px;
border-bottom:100px solid red;
border-right:200px solid transparent;
}
/*左下三角形*/
.tirangle-right-down{
width:0px;
height:0px;
border-bottom:100px solid red;
border-left:200px solid transparent;
}
/*平行四边形*/
.parallelogram {
width:150px;
height:100px;
margin-left:20px;
-webkit-transform: skew(20deg);
-moz-transform: skew(20deg);
-o-transform: skew(20deg);
}
/*梯形*/
.trapezoid{
widht:100px;
height:0px;
border-bottom: 100px solid red;
border-left:50px solid transparent;
border-right:50px solid transparent;
}
/*六角星*/
.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;
}
/*五角星*/
.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:'';
}
/*五角大楼*/
.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;
}
/*六边形*/
.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;
}
/*八角形*/
.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;
}
/*爱心*/
.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%;
}
/*无穷大符号*/
.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 red;
-moz-border-radius:50px 50px 0 50px;
border-radius:50px 50px 0 50px;
-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:50px 50px 50px 0;
border-radius:50px 50px 50px 0;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
/*鸡蛋*/
.egg {
display:block;
width:126px;
height:180px;
background-color:red;
-webkit-border-radius:63px 63px 63px 63px/108px 108px 72px72px;
border-radius: 50% 50% 50% 50% /60% 60% 40% 40%;
}
/*药丸*/
.pill {
width:0px;
height:0px;
border-right:60px solid transparent;
border-top:60px solid red;
border-left:60 pxsolid red;
border-bottom:60px solid red;
border-top-left-radius:60px;
border-top-right-radius:60px;
border-bottom-left-radius:60px;
border-bottom-right-radius:60px;
}
/*提示框*/
.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;
}
/*钻石*/
.cut-diamond {
border-style:solid;
border-color:transparent transparent red transparent;
border-width:0 25px 25px 25px;
height:0;
width:50px;
position:relative;
margin:20px 0 50px 0;
}
.cut-diamond:after {
content:"";
position:absolute;
top:25px;
left:-25px;
width:0;
height:0;
border-style:solid;
border-color:red transparent transparent transparent;
border-width:70px 50px 0 50px;
}
</style>
</head>
<body>
<div class="cut-diamond"></div>
</body>
</html>
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。