CSS实现多种形状（一）

摘要: 灵活使用css的border等属性，还有transform

前几天自己准备开始做一个小demo时，然而在布局的时候却gg了，所以自己又花了点时间去熟悉了一下css的基本属性和用法，最后感觉这一块有点意思，所以准备写一篇博文，最后再告诫自己一句：学习要温故；不在扯了，直接上菜吧!哈哈。。。

1.最简单的矩形

/*css 部分 */
.square{
width:100px;
height:100px;
backgroud-color:red;
}
/* div*/
<div class="square"></div>

2.三角形向上

/*css 部分 */
#traiangle-up{
width:0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 50px solid #669
}
/* div*/
<div class="traiangle-up"></div>

先举个例子吧， 就拿border-right和border-bottom；

#id3{
width:0;
height: 0;
border-right: 50px solid #000;
border-bottom: 50px solid #669;
}

效果图：

；个人认为这里有集合的感觉，自己也有点迷糊

当right设置为transparent（透明）的时候，右上角那个小三角就有over了；同理左边





同理可以做出三角向下等；

3.说一下三角的原理吧

#haha{
width:10px;
height:10px;
border-left:50px solid red;
border-right: 50px solid blue;
border-bottom: 50px solid pink;
border-top: 50px solid green;
background: #000;
}

<div id="haha"></div>

效果图就是这样，只要把宽高设置为0即可，实现四个小三角形，然后把任意的几个设置为transparent就可以看看了，就好用firebug去看看layout,去加深理解。

对于三角制作的理解后可以改变宽高实现梯形；

4.平行四边形的制作，对于transform里的skew()的理解

#haha{
width:100px;
height:100px;
background-color: red;
transform: skew(30deg);
}

这里主要是对于skew的角度以及倾斜中心的认识，skew(x,y);


skew(30deg)

skew(0deg ,10deg)

skew( 30deg,10deg)

5.扇形 border-radius的使用

#shanxing{
background:red;
-webkit-border-radius: 50px 0 0 0;
-moz-border-radius: 50px 0 0 0;
border-radius: 50px 0 0 0;
height: 50px;
width: 50px;
}

对于border-redius(x,y),x为水平距离，y为垂直距离



注意点：当border-redius设置的值会有重叠的问题，等下说

6.椭圆，[b]border-redius灵活使用[/b]

.oval{
width: 200px;
height: 100px;
background: red;
-moz-border-radius: 100px / 50px;
-webkit-border-radius: 100px / 50px;
border-radius: 100px / 50px;
}

border-redius:x/y; ' / ' 前后分别为水平和垂直

说说重叠吧：

1.左上角和右上角重叠，当宽度 < 圆角半径*2时出现


{ width:50px;height:100px;background-color: red;border-radius: 50px;}

2.左上角和左下角重叠，当宽度 > 圆角半径*2时出现


{width:200px;height:100px;border-radius:50px;}

3、四个角重叠，当宽度 = 高度 = 圆角半径*2时


{width:100px;height:100px;border-radius:50px;}

有一个博客介绍过，但是我把地址忘了。。

先写这些吧，有时间吧稍稍复杂的图形写一下