数码吧

CSS3圆角正三角形，圆角正六边形，圆角正多边形

当我得知border-radius只用于矩形时我是拒绝的，

但我想做个不加特技纯css的圆角正六边形，

想想也是，正六边形不就是三个矩形旋转得来的嘛，

使用了CSS3的特性transform:rotate();border-radius就能完成圆角的正六边形，可用于做蜂窝布局的页面

代码

http://jsfiddle.net/DrCalculon/myeLc841/3/

	.hexagon {
	    background-color:rgba(255,0,0,0.4);
	    width:86.6%;
	    height:50%;
        position:relative;
	    border-radius:3px;
	}
	.hexagon:after {
	    content:'';
	    background-color:inherit;
	    width:100%;
	    height:100%;
	    border-radius:3px;	  
            position:absolute;
            top:0;
	    -webkit-transform:rotate(60deg); 
	}
	.hexagon:before {
	    content:'';
	    background-color:inherit;
	    width:100%;
	    height:100%;
	    border-radius:3px;
	    -webkit-transform:rotate(120deg);
	}

同样的道理，可以做出圆角的正2n边形

万一要用到圆角的正三角形呢，矩形可变不了三角形呀，咋办

但是三个菱形是可以拼成三角形的，像这样

变出一个菱形我是这么做的

1.先变出一个正方形

2.绕中心旋转45度

3.压缩X轴

菱形出来了，接着就是旋转加平移到合适的位置

由于CSS3的transform属性不能叠加使用 如rotate()后scale()

必须使用transform:matrix()矩阵运算（这里就不详细展开了）

代码如下

http://jsfiddle.net/DrCalculon/rdqt945v/17/

<div >
        <div ></div>
        <div ></div>
        <div ></div>
</div>

.rhombus {
    height:100%;
    width:100%;
    position:absolute;
    border-top-right-radius:15px;
    top: -7.2170%;
    background-color:rgba(255, 0, 0, 0.4);
    -webkit-transform:matrix(0.25, -0.433, 0.25, 0.433, 0, 0);
}
.rhombus.r120 {
    border-radius:0;
    border-bottom-left-radius:15px;
    left:12.5%;
    top:14.234%;
    background-color:rgba(0, 255, 0, 0.4);
    -webkit-transform:matrix(-0.5, 0, 0.25, 0.433, 0, 0);
}
.rhombus.r240 {
    border-radius:0;
    border-bottom-right-radius:15px;
    left:-12.5%;
    top:14.234%;
    background-color:rgba(0, 0, 255, 0.4);
    -webkit-transform:matrix(-0.5, 0, -0.25, 0.433, 0, 0);
}
.triangle {
    width:300px;
    height:300px;
    position:relative;
}

有了正三角形，其他的正n边形(n>=3)就可以通过它的变换得到啦

另外，这正三角我写的有些繁琐，哪位大神有更简单的方法实现欢迎交流