css控制div的各种形状
2021-01-18 05:14
标签：alt sre san one ova 一半 不规则 制作 float CSS3的一个非常酷的特性是允许我们创建各种规则和不规则形状的图形，从而可以减少图片的使用。 以前只能在Photoshop等图像编辑软件中制作的复杂图形现在使用CSS3就可以完成了。 通过使用新的CSS属性，像transform和border-radius，我们可以创建非常漂亮和复杂的图形效果。 首先是圆形 这个用的是比较常见的也很简单。 要使用CSS来制作一个圆形，我们需要一个 圆形在设置CSS时要设置宽度和高度相等，然后设置 代码如下： 椭圆形是正圆形的一个变体，同样使用一个带ID的 设置椭圆形的CSS时，高度要设置为宽度的一半， 代码如下： 要创建一个CSS三角形，需要使用 另外，在制作三角形时，宽度和高度要设置为0。 代码如下： 与正三角形不同的是，倒三角形要设置的是 代码如下： 左三角形操作的是 代码如下： 右三角形操作的是 代码如下： 制作菱形的方法有很多种。这里使用的是 代码如下： 梯形是三角形的一个变体，设置CSS梯形时，左右两条边设置为相等，并且给它设置一个宽度。 代码如下： 平行四边形的制作方式是使用 代码如下： 星形的HTML结构同样使用一个带ID的空 星形的实现方式比较复杂，主要是使用 代码如下： 和五角星的制作方法不同，六角星形状的制作方法是操纵 代码如下： 创建CSS五边形需要结合两个图形：一个梯形，然后在它的上面放一个三角形，共同组成一个五边形。 代码如下： css控制div的各种形状 标签：alt sre san one ova 一半 不规则 制作 float 原文地址：https://www.cnblogs.com/yztdd99/p/13354277.htmlcss控制div的各种形状
圆形
div，给它设置一个ID。border-radius属性为宽度或高度的一半就可以了。div id="circle">div>
#circle {
width: 120px;
height: 120px;
background: #7fee1d;
-moz-border-radius: 60px;
-webkit-border-radius: 60px;
border-radius: 60px;
}
椭圆形
div来制作。border-radius属性也要做相应的改变。#oval {
width: 200px;
height: 100px;
background: #e9337c;
-webkit-border-radius: 100px / 50px;
-moz-border-radius: 100px / 50px;
border-radius: 100px / 50px;
}
三角形
border，通过设置不同边的透明效果，我们可以制作出三角形的现状。div id="triangle">div>
#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三条边的属性。#triangle {
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;
}
右三角形
border-bottom、border-left和border-right三条边的属性，其中上边和下边要设置透明属性。#triangle_right {
width: 0;
height: 0;
border-top: 70px solid transparent;
border-left: 140px solid #ff5a00;
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;
}
梯形
#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);
}
星形
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);
}
六角星形
border属性来制作两半图形，然后合并它们。#star_six_points {
width: 0;
height: 0;
display: block;
position: absolute;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid #de34f7;
margin: 10px auto;
}
#star_six_points:after {
content: "";
width: 0;
height: 0;
position: absolute;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-top: 100px solid #de34f7;
margin: 30px 0 0 -50px;
}
五边形
#pentagon {
width: 54px;
position: relative;
border-width: 50px 18px 0;
border-style: solid;
border-color: #277bab transparent;
}
#pentagon:before {
content: "";
height: 0;
width: 0;
position: absolute;
top: -85px;
left: -18px;
border-width: 0 45px 35px;
border-style: solid;
border-color: transparent transparent #277bab;
}
上一篇：js---函数