以下几个例子主要是运用了css3中border、bordr-radius、transform、伪元素等属性来完成的，我们先了解下它们的基本原理。
border：简单的来说border语法主要包含（border-width、border-style、border-color）三个属性。
- border-top（上边框）：border-width border-style border-color
- border-right（右边框）：border-width border-style border-color
- border-bottom（下边框）：border-width border-style border-color
- border-left（左边框）：border-width border-style border-color
border-radius：border-radius 的语法比我们想像中灵活得多。你可能会惊讶地发现 border-radius 原来是一个简写属性。它所对应的各个展开式属性：
- border-top-left-radius（左上圆角半径）
- border-top-right-radius （右上圆角半径）
- border-bottom-right-radius （右下圆角半径）
- border-bottom-left-radius（左下圆角半径）
border-image：共有三个属性，分别是图片（border-image-source）、剪裁位置（border-image-slice）、重复性（border-image-repeat）。
图片：使用URL调用
剪裁位置：共有1~4个参数，没有单位（默认是像素），也可以用百分比
- 第一个参数a：距离上边相应长度进行裁剪
- 第二个参数b：距离右边相应长度进行裁剪
- 第三个参数c：距离下边相应长度进行裁剪
- 第四个参数d：距离左边相应长度进行裁剪
重复性：有三个参数 stretch（默认值），round，repeat
- 默认值是stretch，拉伸的意思，可以看到上面的效果图中，“2”是垂直拉伸的，“>”是水平拉伸的，而中间的格子是水平垂直一起拉伸的。
- round是平铺
- repeat是重复
话不多说，来直接看下效果：
1、三角形系列（三角形、倒三角、左三角、右三角、左上三角、右上三角、左下三角、右下三角）
主要用到的是：宽度高度设置为0， border的各个边的设置（各个边的透明或不透明）；
[AppleScript] 纯文本查看 复制代码
.triangle-up {
/* 三角形 */
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid #f00;
}
.triangle-down {
/* 倒三角 */
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-top: 100px solid #f00;
}
.triangle-left {
/* 左三角 */
width: 0;
height: 0;
border-top: 50px solid transparent;
border-bottom: 50px solid transparent;
border-right: 100px solid #f00;
}
.triangle-right {
/* 右三角 */
width: 0;
height: 0;
border-top: 50px solid transparent;
border-bottom: 50px solid transparent;
border-left: 100px solid #f00;
}
.triangle-topleft {
/* 左上三角 */
width: 0;
height: 0;
border-right: 100px solid transparent;
border-top: 100px solid #f00;
}
.triangle-topright {
/* 右上三角 */
width: 0;
height: 0;
border-left: 100px solid transparent;
border-top: 100px solid #f00;
}
.triangle-downleft {
/* 左下三角 */
width: 0;
height: 0;
border-right: 100px solid transparent;
border-bottom: 100px solid #f00;
}
.triangle-downright {
/* 右下三角 */
width: 0;
height: 0;
border-left: 100px solid transparent;
border-bottom: 100px solid #f00;
}2、梯形（三角形的变体，设置左右两条边相等，并且给它设置一个宽度）
[AppleScript] 纯文本查看 复制代码
.Trapezium {height: 0;
width: 100px;
border-bottom: 100px solid #dc2500;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
}
3、爱心（心形的制作是非常复杂的，可以使用伪元素来制作，分别将伪元素旋转不同的角度，并修改transform-origin属性来元素的旋转中心点）
[AppleScript] 纯文本查看 复制代码
.love {
/* 爱心 */
position: relative;
}
.love:before {
content: "";
width: 70px;
height: 110px;
background: #f00;
position: absolute;
border-top-left-radius: 50%;
border-top-right-radius: 50%;
transform: rotate(45deg);
}
.love:after {
content: "";
width: 70px;
height: 110px;
background: #f00;
position: absolute;
border-top-left-radius: 50%;
border-top-right-radius: 50%;
transform: rotate(-45deg);
left: -30px;
}