使用css3绘制出各种几何图形_css3_CSS_网页制作_

1、圆形

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

html:

css:

 2、自适应椭圆

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

代码如下：

html:

css:

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

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

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

html:

css:

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

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

代码如下：
html:

css:

5、四分之一椭圆

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

代码如下：
html:

css:

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

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

html:

css:

 7、平行四边形

思路：伪元素方案:是把所有样式（背景、边框等）应用到伪元素上，然后再对 伪元素进行变形。因为我们的内容并不是包含在伪元素里的，所以内容并不会受到变形的影响。代码如下：

html:

css:

技巧总结：这个技巧不仅对 skew() 变形来说很有用，还适用于其他任何变形样式，当我们想变形一个元素而不想变形它的内容时就可以用到它。

8、菱形

思路：我们把这个技巧针对 rotate() 变形样式稍稍调整一下，再用到一个正方形元素上，就可以很容易地得到一个菱形。代码如下：

html:

css:

技巧总结：这个技巧的关键在于，我们利用伪元素以及定位属性产生了一个方块， 然后对伪元素设置样式，并将其放置在其宿主元素的下层。这种思路同样可 以运用在其他场景中，从而得到各种各样的效果。

9、菱形图片

思路：基于变形的方案，
我们想让图片的宽度与容器的对角线相等，而不是与边长相等。需要用到勾股定理，这个定理告诉我们，一个正方形的对角线长度等于它的边长乘以根号2，约等于1.414 213 562  。因此，把 max-width 的值设置为根号2乘以100%约等于 414.421 356 2% 是很合理的，或者把这个值向上取整为 142% ，因为我们不希望因为计算的舍入问题导致图片在实际显示时稍小（但稍大是没问题的，反正我们都是在裁切图片嘛）

代码如下：
html:

css:

技巧总结：我们希望图片的尺寸属性保留 100% 这个值，这样当浏览器不支持变 形样式时仍然可以得到一个合理的布局。 „ 通过 scale() 变形样式来缩放图片时，是以它的中心点进行缩放的 （除非我们额外指定了 transform-origin 样式） 。通过 width 属性 来放大图片时，只会以它的左上角为原点进行缩放，从而迫使我们 动用额外的负外边距来把图片的位置调整回来.

10、切角效果

思路：基于background:linear-gradient()的方案:把四个角都做出切角效果了。你需要四层渐变图案，代码如 下所示：

html: