用 CSS3 怎么绘制需要的几何图形

1、圆形

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

html:

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

2、自适应椭圆

html:

css:
.example3{ width:200px;  height:150px; border-radius:50%;  background:#8BC34A;}

3、自适应的半椭圆:沿横轴劈开的半椭圆

html:

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

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

html:

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

５、四分之一椭圆

html:

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:

     


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

如有错误，请大家多多指教！