CSS 揭秘（二）形状

Posted on | In

自适应椭圆

圆



1
2
3
4
5
display: inline-block;
height: 200px;
width: 200px;
background: #fff;
border-radius: 50%;

椭圆



1
2
3
4
5
display: inline-block;
height: 150px;
width: 200px;
background: #fb3;
border-radius: 50%;

二分一椭圆



1
2
3
4
5
display: inline-block;
height: 150px;
width: 200px;
background: #fff;
border-radius:100% 0 0 100% / 50%;

四分一椭圆



1
2
3
4
5
display: inline-block;
height: 150px;
width: 200px;
background: #fff;
border-radius:100% 0 0 0;

平行四边形



1
2
3
4
5
6
display: inline-block;
position: relative;
height: 100px;
width: 200px;
background: #fff;
transform: skewX(-45deg);

伪元素方法：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
display: inline-block;
position: relative;
height: 100px;
width: 200px;
background: #fff;
position:relative
//thisEle::before
content:'';
position:absolute;
top:0;right:0;bottom:0;left:0;
background:#58a;
z-index:-1;
transform:skew(45deg);

菱形图片




1
2
3
4
display: inline-block;
height: 200px;
width: 200px;
-webkit-clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);

兼容IE

1
2
3
4
5
6
7
8
display: inline-block;
height: 200px;
width: 200px;
background: #fff;
transform: rotate(-45deg);
overflow: hidden;
transform: rotate(45deg) scale(1.5);