Html
    Css
    Js

    
                        
    .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%;
}

                        
↑上面代码改变,会自动显示代码结果 jQuery调用版本:1.11.3
 立即下载

太极图(原创)

自适应css图形,看到别人做了一个太极,画了图就试着写了一下

其中了解到 border-radius 属性值的写法,也算一种收获。

这个图形大致的要点总结一下就是 border-radius ,根据这个做小猪佩奇之类身上的弧线也是可以的,国外和腾讯的工程师都有放出小猪佩奇css,大家感兴趣可以搜一下

      border-radius: 左上水平圆半径 右上水平圆半径 右下水平圆半径 左下水平圆半径/左上垂直圆半径 右上垂直圆半径 右下垂直圆半径 左下垂直圆半径

关于具体属性的解释张鑫旭有篇文章介绍的挺具体了 ,搜索关键字 "秋月何时了,css3 border-radius知多少?"

0