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

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

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

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

1、正方形（square）：

CSS Code:

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

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

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

如何工作？

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

随着Web技术的日新月异，以前一些3D立体效果仅依靠图片来实现，现在我们可以只使用CSS和HTML来实现。今天我们一起来看仅使用CSS3和一些简单的HTML来制作一种“Ribbon”效果，这种效果思路来源于Piervincenzo Madeo介绍使用纯CSS写的“Ribbon”效果——《How To Create Depth And Nice 3D Ribbons Only Using CSS3》。具体效果大家可以点击：