以下几个例子主要是运用了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的各个边的设置（各个边的透明或不透明）；
.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、梯形（三角形的变体，设置左右两条边相等，并且给它设置一个宽度）
.Trapezium {
height: 0;
width: 100px;
border-bottom: 100px solid #dc2500;
border-left: 50px solid transparent;
border-right: 50px solid transparent; }
3、爱心（心形的制作是非常复杂的，可以使用伪元素来制作，分别将伪元素旋转不同的角度，并修改transform-origin属性来元素的旋转中心点）
.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; }4、 食人豆（吃豆人的制作方法是先在一个圆形里面制作一个透明的三角形）
.pacman {
/* 食人豆 */
width: 0;
height: 0;
border: 60px solid #f00;
border-right: 60px solid transparent; border-radius: 100%; }5、对话框（消息提示框可以先制作一个圆角矩形，然后在需要的地方放置一个三角形）
.alertDialog {
/* 对话框：一个圆角矩形和一个小三角形 */
width: 150px;
height: 100px;
background: #f00;
border-radius: 10px;
position: relative;
}
.alertDialog:before {
content: "";
width: 0; height: 0; position: absolute; left: -20px; top: 40px; border-top: 10px solid transparent; border-bottom: 10px solid transparent; border-right: 20px solid #f00; }6、钻石（首先画一个直角梯形，再通过伪类元素在其下方画一个三角形）
.diamond {
/* 钻石：梯形和三角形组成 */
width: 50px;
height: 0;
position: relative;
border-bottom: 25px solid #f00;
border-left: 25px solid transparent; border-right: 25px solid transparent; } .diamond:before { content: ""; width: 0; height: 0; position: absolute; border-left: 50px solid transparent; border-right: 50px solid transparent; border-top: 70px solid #f00; left: -25px; top: 25px; }7、五角星（星形的实现方式比较复杂，主要是使用transform属性来旋转不同的边）
.starFive {
/* 五角星： */
width: 0;
height: 0;
position: relative;
border-left: 80px solid transparent; border-right: 80px solid transparent; border-bottom: 60px solid #f00; transform: rotate(35deg); } .starFive:before { content: ""; position: absolute; width: 0; height: 0; border-left: 80px solid transparent; border-right: 80px solid transparent; border-bottom: 60px solid #f00; transform: rotate(-70deg); top: 3px; left: -80px; } .starFive:after { content: ""; position: absolute; width: 0; height: 0; border-bottom: 60px solid #f00; border-right: 20px solid transparent; border-left: 20px solid transparent; transform: rotate(-35deg); top: -40px; left: -49px; }8、菜单（结合::before和::after两个伪元素）
.btn-hamburger i {
/* position: relative; */
display: -moz-inline-stack;
display: inline-block;
zoom: 1; width: 22px; height: 3px; color: #fff; font: bold .24rem/0.4 Helvetica; text-transform: uppercase; text-indent: -55px; background: #fff; transition: all 0.2s ease-out; } .btn-hamburger i::before, .btn-hamburger i::after { content: ''; width: 22px; height: 3px; background: #fff; position: absolute; left: 0; transition: 0.2s; } .btn-hamburger i::before { top: -7px; } .btn-hamburger i::after { bottom: -7px; }更多专业前端知识，请上 【猿2048】www.mk2048.com
