CSS实现多种形状（一）

    前几天自己准备开始做一个小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.椭圆，border-redius灵活使用

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

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

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

转载于:https://my.oschina.net/u/2460998/blog/616098