现代 CSS

CSS画图形

Pure CSS3 Ribbons

前面在CSS3 Ribbons一文中介绍了一个纯CSS3制作的“Ribbons”效果,今天收集了更多的“Ribbons”效果,以供大家参考与学习,希望大家能喜欢。

在看具体每个demo之前,我们一起来看下面一个截图:

CSS制作图形速查表

前面在《纯CSS制作的图形效果》一文中介绍了十六种CSS画各种不同图形的方法。今天花了点时间将这方面的制作成一份清单,方便大家急用时有地方可查。别的不多说了,直接看代码。

为了节省时间,下面图形都采用的一个标签,可以是块元素也可以是行内元素,不过行内元素需要加上“display:block;”,唯一不同的是,在此用了不同的类名来区别,相关类名我放在了标题的后面,以便大家对应查看。

1、正方形(square):

CSS Code:

		.square {
			width: 100px;
			height:100px;
			background: #E5C3B2;
		}
	

上面的方法是,设置宽度和高度一致就可以实现正方形的效果,下面展示一种boder制作正方形的效果:

纯CSS制作的图形效果

今天这个教程中主要和大家一起来探讨和学习:如何使用CSS来制作图形,比如说圆形,半圆形,三角形等。前面有几个教程中都有使用了纯CSS使用border来制作三角形,今天我特意在网上查阅了一下,介绍这样的教程还是蛮多的,因此我也决定整理一份相关教程出来与大家一起分享。最早发现使用border制作三角形是人物Eric Meyer的发现的,但我没有找到Eric Meyer介绍的教程,可相关教程就很多,我在此就不列出来了,我们开始今天的学习之旅吧。

如何工作?

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

返回顶部