CSS3奇思妙想图形

偶尔看到一篇不错文章，在原来CSS3图形创建基础上扩展了很多。

有的方法经过测试后做了些修改，这里记录总结下

 参考网址：http://sbco.cc/magicCss/html/index.html

【目录】

①心形

②气泡三角形

 

 

 

【内容】

①心形

利用长方形和内切圆圆角实现

<style type="text/css">
        .heart{width:160px;height:200px;position:relative; 
        /* relative(相对定位) 对象不可层叠、不脱离文档流，*/
      /*参考自身静态位置通过top,bottom,left,right定位，并且可以通过z-index进行层次分级 */
        }
        /* after 伪元素在元素之前添加内容*/
        .heart:before{
            content:" ";
            border-radius:100px 100px 0 0;/* 正方形的内切圆的半径等于正方形边长的一半 */
            width:80px; height:120px;/* 长方形 */
            background:#669;
            -moz-transform: rotate(-45deg);/* 逆时针旋转45°*/
            -ms-transform: rotate(-45deg);
            -o-transform: rotate(-45deg);
            -webkit-transform: rotate(-45deg);
            position:absolute;
          /* absolute(绝对定位) 脱离文档流，通过 top,bottom,left,right 定位 */
            left:20px;
        }
        /* after 伪元素在元素之后添加内容*/
        .heart:after{
            content:" ";
            width:80px; height:120px;
            background:#669;
            border-radius:100px 100px 0 0;
            -moz-transform: rotate(45deg);
            -ms-transform: rotate(45deg);
            -o-transform: rotate(45deg);
            -webkit-transform: rotate(45deg);
            position:absolute;
            left:48px;top:0px;
        }
    </style>

 

 

②气泡三角形

利用 border 的 transparent 特性实现

.heart{
           margin: 20px auto;
           width: 200px;
           height: 100px;
           background-color: aquamarine;
           position: relative;
       }
        .heart:after{
            content: '';
            border-right: 10px solid transparent;
            border-left: 10px solid transparent;
            border-bottom: 10px solid aquamarine;
            position: absolute;
            top: -10px;
            left: 90px;
        }

 

 ③切角

利用线性渐变实现

 

 

 

 

 

 

 

 

.