使用css3绘制出各种几何图形

1、圆形

示例:　　　　　　　　　
思路：给任何正方形元素设置一个足够大的 border-radius ，就可以把它变成一个圆形.代码如下：

html:

复制代码

代码如下:
<div class="size example1"></div>

css:

复制代码

代码如下:
.size{
width:200px;
height: 200px;
background: #8BC34A;
}
.example1{
border-radius:100px;
}

2、自适应椭圆

思路：border-radius 这个属性还有另外一个鲜为人知的真相，它不仅可以接受长度值，还可以接受百分比值。这个百分比值会基于元素的尺寸进行解析.这意味着相同的百分比可能会计算出不同的水平和垂直半径。

代码如下：

html:

复制代码

代码如下:
<div class="example3"></div>

css:

复制代码

代码如下:
.example3{
width:200px;
height: 150px;
border-radius:50%;
background: #8BC34A;
}
[/code}</p><p><strong><font color="#ff0000">3、自适应的半椭圆:沿横轴劈开的半椭圆</font></strong></p><p><img border="0" alt="" src="https://files.Vevb.com/file_images/article/201608/2016081516050814.jpg" />
思路：border-radius 的语法比我们想像中灵活得多。你可能会惊讶地发现 border-radius 原来是一个简写属性。</p><p>第一种方法就是使用它所对应的各个展开式属性：
[code]
„ border-top-left-radius
„ border-top-right-radius
„ border-bottom-right-radius
„ border-bottom-left-radius

我们甚至可以为所有四个角提供完全不同的水平和垂直半径，方法是在斜杠前指定 1~4 个值，在斜杠后指定另外 1~4 个值。举例来说，当 border-radius 的值为10px / 5px 20px 时，其效果相当于 10px 10px 10px 10px / 5px 20px 5px 20px 。

为 border-radius 属性分别指定4、3、2、1 个由空格分隔的值时，这些值是以这样的规律分配到四个角上的（请注意，对椭圆半径来说，斜杠前和斜杠后最多可以各有四个参数，这两组值是以同样的方法分配到各个角的）

代码如下：自适应的半椭圆:沿横轴劈开的半椭圆