CSS3制作各种形状图像

圆形-椭圆形-三角形-倒三角形=左三角形-右三角形-菱形-平行四边形- 星形-六角星形-五边形-六边形-八角形-心形-蛋形-无穷符号-消息提示框

不废话直接 html界面(亲测的) ------转自百度经验 http://jingyan.baidu.com/article/e52e36154226ef40c70c5148.html

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>css3画图形</title>
<style media="screen">
div{
text-align: center;
display: inline-block;
margin-left: 20px;
}
#circle {/*圆形在设置CSS时要设置宽度和高度相等,然后设置border-radius属性为宽度或高度的一半即可:*/
width: 120px;
height: 120px;
background: #7fee1d;
-moz-border-radius: 60px;
-webkit-border-radius: 60px;
border-radius: 60px;
}
/*设置椭圆形的CSS时,高度要设置为宽度的一半,border-radius属性也要做相应的改变:*/
#oval {
width: 200px;
height: 100px;
background: #e9337c;
-webkit-border-radius: 100px / 50px;
-moz-border-radius: 100px / 50px;
border-radius: 100px / 50px;
}
/*要创建一个CSS三角形,需要使用border,通过设置不同边的透明效果,我们可以制作出三角形的现状。
另外,在制作三角形时,宽度和高度要设置为0。*/
#triangle {
width: 0;
height: 0;
border-bottom: 140px solid #fcf921;
border-left: 70px solid transparent;
border-right: 70px solid transparent;
}

/*与正三角形不同的是,倒三角形要设置的是border-top、border-left和border-right三条边的属性:*/
#triangleDown {
width: 0;
height: 0;
border-top: 140px solid #20a3bf;
border-left: 70px solid transparent;
border-right: 70px solid transparent;
}

/*左三角形操作的是border-top、border-left和border-right三条边的属性,其中上边和下边要设置透明属性。*/
#triangle_left {
width: 0;
height: 0;
border-top: 70px solid transparent;
border-right: 140px solid #6bbf20;
border-bottom: 70px solid transparent;
}

/*制作菱形的方法有很多种。这里使用的是transform属性和rotate相结合,使两个正反三角形上下显示。*/
#diamond {
width: 120px;
height: 120px;
background: #1eff00;
/* Rotate */
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
/* Rotate Origin */
-webkit-transform-origin: 0 100%;
-moz-transform-origin: 0 100%;
-ms-transform-origin: 0 100%;
-o-transform-origin: 0 100%;
transform-origin: 0 100%;
margin: 60px 0 10px 310px;
}

/*梯形是三角形的一个变体,设置CSS梯形时,左右两条边设置为相等,并且给它设置一个宽度。*/
#trapezium {
height: 0;
width: 120px;
border-bottom: 120px solid #ec3504;
border-left: 60px solid transparent;
border-right: 60px solid transparent;
}

/*平行四边形的制作方式是使用transform属性使长方形倾斜一个角度。*/
#parallelogram {
width: 160px;
height: 100px;
background: #8734f7;
-webkit-transform: skew(30deg);
-moz-transform: skew(30deg);
-o-transform: skew(30deg);
transform: skew(30deg);
}

/*星形的HTML结构同样使用一个带ID的空div。星形的实现方式比较复杂,主要是使用transform属性来旋转不同的边。仔细体会下面的代码。*/
#star {
width: 0;
height: 0;
margin: 50px 0;
color: #fc2e5a;
position: relative;
display: block;
border-right: 100px solid transparent;
border-bottom: 70px solid #fc2e5a;
border-left: 100px solid transparent;
-moz-transform: rotate(35deg);
-webkit-transform: rotate(35deg);
-ms-transform: rotate(35deg);
-o-transform: rotate(35deg);
}

#star:before {
height: 0;
width: 0;
position: absolute;
display: block;
top: -45px;
left: -65px;
border-bottom: 80px solid #fc2e5a;
border-left: 30px solid transparent;
border-right: 30px solid transparent;
content: '';
-webkit-transform: rotate(-35deg);
-moz-transform: rotate(-35deg);
-ms-transform: rotate(-35deg);
-o-transform: rotate(-35deg);
}

#star:after {
content: '';
width: 0;
height: 0;
position: absolute;
display: block;
top: 3px;
left: -105px;
color: #fc2e5a;
border-right: 100px solid transparent;
border-bottom: 70px solid #fc2e5a;
border-left: 100px solid transparent;
-webkit-transform: rotate(-70deg);
-moz-transform: rotate(-70deg);
-ms-transform: rotate(-70deg);
-o-transform: rotate(-70deg);
}

/*六边形的制作方法可以有很多种,可以像五边形一样,先制作一个长方形,然后在它的上面和下面各放置一个三角形。*/
#hexagon {
width: 100px;
height: 55px;
background: #fc5e5e;
position: relative;
margin: 10px auto;
}

#hexagon:before {
content: "";
width: 0;
height: 0;
position: absolute;
top: -25px;
left: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 25px solid #fc5e5e;
}

#hexagon:after {
content: "";
width: 0;
height: 0;
position: absolute;
bottom: -25px;
left: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-top: 25px solid #fc5e5e;
}

/*心形的制作是非常复杂的,可以使用伪元素来制作,分别将伪元素旋转不同的角度,
并修改transform-origin属性来元素的旋转中心点。*/
#heart {
position: relative;
}

#heart:before,#heart:after {
content: "";
width: 70px;
height: 115px;
position: absolute;
background: red;
left: 70px;
top: 0;
-webkit-border-radius: 50px 50px 0 0;
-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%;
}

/*蛋形时椭圆形的一个变体,它的高度要比宽度稍大,并且设置正确的border-radius属性即可以制作出一个蛋形。*/
#egg {
width: 136px;
height: 190px;
background: #ffc000;
display: block;
-webkit-border-radius: 63px 63px 63px 63px / 108px 108px 72px 72px;
border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
}

/*无穷符号可以通过border属性和设置伪元素的角度来实现。*/
#infinity {
width: 220px;
height: 100px;
position: relative;
}

#infinity:before,#infinity:after {
content: "";
width: 60px;
height: 60px;
position: absolute;
top: 0;
left: 0;
border: 20px solid #06c999;
-moz-border-radius: 50px 50px 0;
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);
}

/*消息提示框可以先制作一个圆角矩形,然后在需要的地方放置一个三角形。*/
#comment_bubble {
width: 140px;
height: 100px;
background: #088cb7;
position: relative;
-moz-border-radius: 12px;
-webkit-border-radius: 12px;
border-radius: 12px;
}

#comment_bubble:before {
content: "";
width: 0;
height: 0;
right: 100%;
top: 38px;
position: absolute;
border-top: 13px solid transparent;
border-right: 26px solid #088cb7;
border-bottom: 13px solid transparent;
}
</style>
</head>
<body>
<div id="circle">圆形</div>
<div id="oval">椭圆形</div>
<div id="triangle">正三角形</div>
<div id="triangleDown">倒三角形</div>
<div id="triangle_left">左三角形</div>
<div id="diamond">菱形</div>
<div id="trapezium">梯形</div>
<div id="parallelogram">平行四边形</div>
<div id="star">星形</div>
<div id="hexagon" style="margin-top:30px">六边形</div>
<div id="heart">心形</div>
<div id="egg">蛋形</div>
<div id="infinity">无穷符号</div>
<div id="comment_bubble">消息提示框</div>

</body>
</html>

上一篇:HTTP学习笔记5-常用报头


下一篇:VS2019配置Zeromq(Libzmq)