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

1、圆形

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

html:

复制代码

<div></div>

css:

复制代码

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

 2、自适应椭圆

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

代码如下：

html:

复制代码

<div></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 alt="" src="http://www.jb51.net/img.jbzj.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 个由空格分隔的值时，这些值是以这样的规律分配到四个角上的（请注意，对椭圆半径来说，斜杠前和斜杠后最多可以各有四个参数，这两组值是以同样的方法分配到各个角的）

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

html:

复制代码

<div></div>

css:

复制代码

.example4{
width:200px;
height: 150px;
border-radius: 50% / 100% 100% 0 0;
background: #8BC34A;
}

4、自适应的半椭圆:沿纵轴劈开的半椭圆

思路：自适应的半椭圆:沿纵轴劈开的半椭圆

代码如下：
html:

复制代码

<div></div>

css:

复制代码

.example5{
width:200px;
height: 150px;
border-radius: 100% 0 0 100% / 50%;
background: #8BC34A;
}

5、四分之一椭圆

思路：其中一个角的水平和垂直半径值都需要是100%，而其他三个角都不能设为圆角。

代码如下：
html:

复制代码

<div></div>

css:

复制代码

.example6{
width:160px;
height: 100px;
border-radius: 100% 0 0 0;
background: #8BC34A;
}

 6、用椭圆绘制opera浏览器的logo

思路：绘制opera浏览器的logo,分析起来不难，就只有两个图层，一个是最底部的椭圆，一个是最上面那层的椭圆。先确定一下最底层的椭圆宽高，量了一下，水平宽度为258px，垂直高度为275px，因为其是一个对称的椭圆，没有倾斜度，故4个角均为水平半径为258px，垂直半径为275px的4个相等椭圆，用同样的办法确定最里面的椭圆的半径，因此，四个角均为水平半径120px，垂直半径为229px的椭圆，代码如下：

html:

复制代码

<div>
<div></div>
</div>

css:

复制代码

.opera{
width:258px;
height: 275px;
background: #F22629;
border-radius:258px 258px 258px 258px /275px 275px 275px 275px;
position: relative;
}
.opera-top{
width: 112px;
height: 231px;
background: #FFFFFF;
border-radius: 112px 112px 112px 112px/231px 231px 231px 231px;
position: absolute;
left: 50%;
right: 50%;
top: 50%;
bottom: 50%;
margin-left: -56px;
margin-top: -115px;
}

 7、平行四边形

（编辑：ASP站长网）