.taichi {
width:500px;
height:500px;
background:#ccc;
}
.circle {
position:relative;
height:100%;
}
.half {
width:50%;
height:100%;
position:absolute;
}
.half_w {
background:#fff;
left:0;
border-radius:100% 0% 0% 100%/50% 0% 0% 50%;
}
.half_b {
background:#000;
right:0;
border-radius:0% 100% 100% 0%/0% 50% 50% 0%;
}
.top_circ {
width:100%;
}
.sec_circ {
width:50%;
}
.fin_circ {
width:50%;
}
.top_circ,.sec_circ,.fin_circ {
height:100%;
position:absolute;
}
.full_circle {
position:relative;
width:100%;
height:50%;
left:50%;
border-radius:50%;
}
.full_circle_w {
background:#fff;
}
.full_circle_b {
background:#000;
}
.fin_circ .full_circle {
height:25%;
width:50%;
position:absolute;
}
.fin_circ .full_circle_b {
top:11.5%;
left:67.5%;
}
.fin_circ .full_circle_w {
bottom:11.5%;
left:67.5%;
}
自适应css图形,看到别人做了一个太极,画了图就试着写了一下
其中了解到 border-radius 属性值的写法,也算一种收获。
这个图形大致的要点总结一下就是 border-radius ,根据这个做小猪佩奇之类身上的弧线也是可以的,国外和腾讯的工程师都有放出小猪佩奇css,大家感兴趣可以搜一下
border-radius: 左上水平圆半径 右上水平圆半径 右下水平圆半径 左下水平圆半径/左上垂直圆半径 右上垂直圆半径 右下垂直圆半径 左下垂直圆半径
关于具体属性的解释张鑫旭有篇文章介绍的挺具体了 ,搜索关键字 "秋月何时了,css3 border-radius知多少?"