.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知多少?"