CSS3奇思妙想图形

2018-02-27 11:06:50来源:http://570109268.iteye.com作者:青春..荒唐人点击

分享

偶尔看到一篇不错文章,在原来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;        }

 

 ③切角

利用线性渐变实现

 

 

 

 

 

 

 

 

.

最新文章

123

最新摄影

闪念基因

微信扫一扫

第七城市微信公众平台