标签：ota pes w3c html web pie 心形 应用 strong
前言
关于如何使用CSS来制作图形，比如说圆形，半圆形，三角形等的相关教程还是挺多的，今天我主要想解释一下里面一些demo的实现原理，话不多说，开始吧
以下所有内容只使用一个HTML元素。任何类型的CSS，只要它至少在一个浏览器中支持。
一. 实现一个心形
#heart { position: relative; width: 100px; height: 90px; } #heart:before{ position: absolute; content: ""; left: 50px; top: 0; width: 50px; height: 80px; background: red; -moz-border-radius: 50px 50px 0 0; -webkit-border-radius: 50px 50px 0 0; border-radius: 50px 50px 0 0; -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg);
-webkit-transform-origin: 0 100%; -moz-transform-origin: 0 100%; -ms-transform-origin: 0 100%; -o-transform-origin: 0 100%; transform-origin: 0 100%; } #heart:after { left: 0; position: absolute; content: ""; top: 0; width: 50px; height: 80px; background: red; -moz-border-radius: 50px 50px 0 0; -webkit-border-radius: 50px 50px 0 0; border-radius: 50px 50px 0 0; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); -webkit-transform-origin: 100% 100%; -moz-transform-origin: 100% 100%; -ms-transform-origin: 100% 100%; -o-transform-origin: 100% 100%; transform-origin :100% 100%; }
效果
原理：这个心形主要是由两部分交叠组成
border-radius: 50px 50px 0 0; /* 等价于 */ border-top-left-radius: 50px; border-top-right-radius: 50px;
实现如下效果
再利用transfrom变换 得到如下，再进行交叠组成。
tip：合理地利用伪元素以及css border-radius属性以及transform变换属性
二. 饼图
即使是最简单的只有两种颜色的形式，用Web技术创建也并不简单
尽管这个东西并不像它曾经看起来那么难以实现，但是也没有什么直接并且简单的方法。但是，现在已经有很多更好、更易于维护的方式来实现它
.pie{ width:50px; height:50px; position:relative; background: linear-gradient(90deg,#eee 50%,green 0); border-radius:50% }
第一步：先画一个圆（饼图特效颜色为 green）
第二步：利用伪元素添加一个蒙版
.pie::before{ position:absolute; content:‘‘; width:50%; height:100%; background: #eee; /* 当饼图比例大于一半的时候 */ /* background: green; */ border-radius:50px 0 0 50px; }
第三步：利用transform的变换 改变角度，实现自己需要的角度
transform:rotate(20deg);
transform-origin:100% 50%;
注：伪元素的旋转变换中心应该设置为圆心
结束语
暂时先说明了两个图形，都是采用CSS或者部分采用了CSS3的属性制作出来的，大家还可以点击CSS3- Tricks 提供的《The Shapes of CSS》里面展示了十多种图形的制作方法。由于部分图形效果使用了CSS3的部分属性，所以在ie的效果可能无法显示。使用css制作三角和圆有效果应用还是很多了，特别是用来制作tips效果
标签：ota pes w3c html web pie 心形 应用 strong
原文地址：http://www.cnblogs.com/kasmine/p/6412948.html
