1、自适应的椭圆
复制代码代码如下:
鼠标划上来看看
.div1{ background:#fb3; width:200px; height:200px; line-height:200px;
text-align: center; border-radius: 50%; transition: all 0.25s ease-in;
}
.div1:hover{ background: #ff1d50; width:400px; height:200px; border-radius: 50%;
-webkit-transition: all 0.2s ease-in; transition: all 0.2s ease-in;
}
运动的椭圆
2、半椭圆
复制代码代码如下:
.div2{ background:#fb3; width:100px; height:100px; border-radius: 100% 0 0 0; transition: all 0.25s ease-in; }
.div3{ background:#fb3; width:100px; height:100px; border-radius: 0 0 0 100%; transition: all 0.25s ease-in; }
本来一个div就可以，不过我用了两个四十五度的，自己玩。
半椭圆
3、平行四边形
复制代码代码如下:
首先
.div4{ position:relative; width:100px; height:100px; line-height:100px; text-align: center; color: #fff; }
.div4::before { content: '';
position:absolute; top:0; right:0; bottom:0; left:0; z-index: -1;
background:#58a; transform:skew(15deg); }
平行四边形
4、平行四边形
复制代码代码如下:
.div5{
width:100px;
height: 100px;
transform:rotate(45deg);
overflow:hidden; }
.div5 >img {
max-width:100%;
transform: rotate(-45deg)scale(1.42);
}
平行四边形
5、切角矩形
复制代码代码如下:
.div6{
width:200px;
height:100px;
background:#58a;
background:
linear-gradient(-45deg,transparent 15px, #58a 0) right,
linear-gradient(45deg,transparent 15px, #655 0) left;
background-size:50% 100%;
background-repeat: no-repeat;
}
切角矩形
6、凹角矩形
复制代码代码如下:
.div7{
width:240px;
height:50px;
background:#58a;
background:
radial-gradient(circle at top left,
transparent 8px,#58a 0)top left,
radial-gradient(circle at top right,
transparent 8px,#58a 0)top right,
radial-gradient(circle at bottom right,
transparent 8px, #58a 0)bottom right,
radial-gradient(circle at bottom left,
transparent 8px,#58a 0)bottom left;
background-size:50% 50%;
background-repeat:no-repeat;
}
凹角矩形
7、切角矩形(SVG)
复制代码代码如下:
.div8{
width:240px;
height:50px;
background:#58a;
border:15px solid #58a;
border-image:1 url('data:image/svg+xml,');
background-clip:padding-box; }
切角矩形
8、梯形
复制代码代码如下:
.div9{
width:240px;
height:40px;
position:relative;
color: white;
}
.div9:before{
content: '';
position:absolute;
top: 0;
right:0;
bottom:0;
left:0;
z-index:-1;
background:#58a;
transform:perspective(.5em)rotateX(5deg);
}
梯形
9、梯形
复制代码代码如下:
.div10{
float:left;
width:60px;
height:40px;
position:relative;
padding:.3em 1em 0;
}
.div10:before{
content: '';
position: absolute;
width:110px;
top:0;right:0;
bottom:0;
left:0;
z-index:-1;
background:#ccc;
background-image:linear-gradient(
hsla(0,0%,100%,.6),
hsla(0,0%,100%,0));
border:1px solid rgba(0,0,0,.4);
border-bottom:none;
border-radius:.5em .5em 0 0;
box-shadow:0 .15em white inset;
transform:perspective(.5em)rotateX(5deg);
transform-origin:bottom;
}
梯形
10、梯形
复制代码代码如下:
float:left;
width:60px;
height:40px;
position:relative;
padding:.3em 1em 0;
}
.div11:before{
content: '';
position: absolute;
width:110px;
top:0;right:0;
bottom:0;left:0;
z-index:-1;
background:#ccc;
background-image:linear-gradient(
hsla(0,0%,100%,.6),
hsla(0,0%,100%,0));
border:1px solid rgba(0,0,0,.4);
border-bottom:none;
border-radius:.5em .5em 0 0;
box-shadow:0 .15em white inset;
transform:perspective(.5em) rotateX(4deg);
transform-origin:bottom left;
}
梯形
11、div饼图
复制代码代码如下:
.div12{
float:left;
width:100px;
height:100px;
border-radius: 50%;
background: #655;
overflow:hidden; position:relative;
}
.div12:after{
content:'';
display:table;
clear:both;
position:absolute;
top:0;bottom:0;left:0;right:0;
}
.div12 div{
position:absolute;
float:left;
width:100px;
height:100px;
border-radius: 50%;
}
.div12>div:first-child{
background-image:
linear-gradient(to right,transparent 50%, rgba(198, 179, 129, 0.94) 0); }
.div12>div:first-child:before{
content: '';
display:block;
margin-left:50%;
height:100%;
border-radius:0 100% 100% 0 /50%;
background-color:#655;
transform-origin:left;
transform: rotate(50deg);
}
.div12>div:nth-child(2){
background-image:
linear-gradient(140deg,transparent 50%, rgba(35, 198, 41, 0.94) 0);
}
.div12>div:nth-child(2):before{
content: '';
display:block;
margin-left:50%;
height:100%;
border-radius:0 100% 100% 0 /50%;
background-color:#655;
transform-origin:left;
transform: rotate(145deg);
}
饼图
12、饼图
复制代码代码如下:
@keyframes fillup { to { stroke-dasharray: 100 100; } }
circle {
fill:yellowgreen;
stroke:#655;
stroke-width: 50;
stroke-dasharray:38 100;
}
svg{
width:100px;height:100px;
transform:rotate(-90deg);
background:yellowgreen;
border-radius:50%;
}
饼图
13、js绘制饼图
复制代码代码如下:
20%
60%
@keyframes fillup { to { stroke-dasharray: 100 100; } }
.pie1 circle {
fill:yellowgreen;
stroke:#655;
stroke-width: 50;
stroke-dasharray:70 160;
}
.pie1 svg{
width:100px;height:100px;
transform:rotate(-90deg);
background:yellowgreen;
border-radius:50%;
}
js绘制饼图
备注：这里的大多数例子，都是从LEA VEROU的《css揭秘》这本书上借鉴来的，感兴趣的童鞋不如去买这本书，简直是CSS神书，就和Js的蝴蝶一样，前端必备。
总结
以上就是这篇文章的全部内容了，希望本文的内容对大家学习或者使用Css3能有所帮助，如果有疑问大家可以留言交流。
