轩枫阁

首页 / Web前端 / CSS / css3绘制各种图形效果

css3绘制各种图形效果

如何使用CSS来制作图形,比如说圆形,半圆形,三角形等。今天我特意在网上查阅了一下,介绍这样的教程还是蛮多的,因此我也决定整理一份相关教程出来与大家一起分享。

如何工作?

很少会有人意识到,当浏览器绘制的border,会有一个角度的问题。我们就是得用这样的一个技巧来制作三角的效果。我们只需要保证一边的边框是有色,其他边框色为透明色,这样我们就很容易制作出三角形,然后改变其大小来实现不同的效果。我们一起来看一段代码:

38cf8268b9106c83551ef101f651c80c

正如你看到的上面代码段是使用border制作的四个三角形,这些三角形都是直角三角形边界大小,如果你改变border-width的大小,你将得到的是另一个三角形

023c15788856d043a62952165df88fa2

当你改变border-style时,你会发现一些很神的效果:

border-style: dotted;

af33de9dcdd59d640e2604da5018b4b4

但这种创意在不同的浏览器下并是支持的。

下面我们一起来通过代码,看看不同类型的制作方法

一、正方形(Square)

正方形是最简单的了,只需要保证元素的宽度和高度相同,这样就OK了。当然我们还可以使用border直接绘制正方形,具体如何绘制大家可以动脑想想,我就不写了,不过使用border绘制正方形,里面不能填充内容的哟。

效果:

03c6e2aa6cc9245c5f301b2dcc8c8f19

二、长方形(Rectangle)

在正方形的基础上改变他们的大小,确保width和height值不相同就行了。

效果:

06965ebe609af922995cacb94e65f9e7

三、圆形(Circle)

效果:

ee3a70df5f13c00654f406fd6e09aef1

圆形的制作,我们采用的是CSS3中的border-radius属性。在制作过程中,有几点需要注意,其一宽度和高度值相同,其二圆角值为宽度或高度值的一半。也有地方提使用设置圆角值为50%,但我在Webkit中有碰到过不支持百分数的情况。

四、半圆形(Semicircle)

制作半圆和圆使用的方法是一样的,但需要配合元素的高度,宽度以及圆角的方位,制作出半圆形效果。

效果:

c2fa0866db7dfb5ec0cf242f59a838d9

五、扇形(Fan-Shaped)

扇形在这里也就是四分之一圆效果,在制作四分之一圆和制作半圆形一样的,我们需要配合的就是元素的三个属性值,具体大家可以参考上面的代码。

效果:

1dc0fa29cf775c4fe9e73bb9b54b3966

六、椭圆形(Oval)

这里使用了border-radius的X/Y两轴取值,制作出一种变形的圆角,在配合宽度等值,就制作了类似椭圆形的一个效果。

效果:

9b06e82d34655718175294bf1a629c05

七、三角效果(Triangle)

教程起就是说的三角效果,这里不在说是如何实现的,我在这里列出几种常见的三角形代码,仅供大家参考

1、三角朝上

2、三角朝下

3、三角向左

4、三角向右

5、左上三角形

设置顶部和左边的颜色值。

6、右上三角

 

 

元素顶部和右边设置边框色

7、左下三角

 

 

元素底部和左边设置边框颜色

8、右下三角

 

 

元素右边和底部设置边框颜色。

效果:

5bc59ef6557bb74a89f55167dec3d810

有关于三角形的制作,大家可以参考:《Creating Triangles in CSS》、《How to Create p Shapes Like Triangles and Circles 》、《CSS三角形的方法》、《Using borders to produce angled shapes》等。

八、平行四边形(Parallelogram)

 

 

平行四边形是在矩形的基础上运用了一个CSS3的transform属性。使用了变形效果。

效果:

5d2a32d13ed35ba3fd18968d77322fe5

九、六角星

 

 

这个六角星是使用了一个“:after”制作了另一个反方向的三角形,在定位层叠到一起,从而形成六角星,说白一点就是两个三角拼在一起变成了六角星。

效果:

321b575d32231df91bc8ea279f972751

十、五角星

 

 

五角星制作,大家可以参考Kit MacAllister写的《CSS Only 5-Point Star》一文。

效果:

2af7c83f314eb39312aeb64fae6ced94

十一、心形

 

 

效果:

1007e49bfdc07d299fb5420385b8fcaa

十二、Pac-Man

 

 

效果:

f8e43a326040cc4b71207047d976b43b

十三、对话泡泡(Talk Bubble)

 

 

有关于更多的对话泡泡的制作,大家还可以参考Nicolas的《Pure CSS speech bubbles》。

效果:

46ba5ebfbc2945ab209c5c21babe30cb

十四、Point Burst

 

 

效果:

66e166f9641dbd9e1e3fea6e49d27128

十五、阴阳图

 

 

效果:

c8d75c34b3e8b69ee49ba59c7ce4b4d1

上面的图形都是彩用CSS或者部分采用了CSS3的属性制作出来的,是不是很有意思呀,如果你喜欢这样的教程,大家还可以点击CSS3-Tricks提供的《The Shapes of CSS》里面展示了十多种图形的制作方法。由于部分图形效果使用了CSS3的部分属性,如果你还在使用IE的话,我建议你使用现代浏览器,比如:Mozilla Firefox、Google Chrome、Safari、Opera。上面展示的效果可能部分实用性不大,但是使用css制作三角和圆有效果应用还是很多了,特别是用来制作tips效果。

转载自:CSDN

本文标题:css3绘制各种图形效果 - 轩枫阁

转载请务必注明出处,欢迎分享

如果觉得我的文章对您有用,请随意打赏
赞  赏
赞赏作者 轩枫-ivan
¥ 6.66
换个金额 使用微信扫一扫赞赏
  • 6.66
  • 8.88
  • 16.8
  • 2.33
  • 52.0
  • 20.0
  • 自定义
  • 10.0
340/456
342/456

相关文章

文章评论

  • 看的激动。。。 谢谢博主了

  • […] 把这些基本的图形进行组合,还可以描绘成不同的图案。以下只是简单的几个举例,更多的图形,自己动手画吧。仅border-radius就能实现这么丰富的图案,如果再加上边框大小、渐变颜色和阴影等,将会添加更多的质感。更多图形请参见:CSS3绘制各种图形效果 […]

纸飞机许愿

x

钢琴节奏

请选择弹奏的曲谱

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 1
    • 2

    [返回曲谱列表]