网页因为 CSS 而呈现千变万化的风格。这一看似简单的样式语言在使用中非常灵活，只要你发挥创意就能实现很多比人想象不到的效果。特别是随着 CSS3 的广泛使用，更多新奇的 CSS 作品涌现出来。
工具/材料
网页浏览器
sublime编辑器
操作方法
01
打开sublime编辑器，新建一个html文件
02
建好了之后在<head></head>之间把样式写出来，这里先写一个向上的三角形样式
代码如下：
.san {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid #ff0066;
}
03
在<head></head>里面写好样式后，我们在<body></body>来写个div标签，代码如下
<div class="san">
</div>
04
写好之后，我们在浏览器中查看，效果如下所示。
05
继续画左右下的三角形
代码如下：
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
* {margin: 50px auto;}
/* 上 */
.san_shang {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid #ff0066;
}
/* 下 */
.san_xia {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-top: 100px solid red;
}
/* 左 */
.san_zuo {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-top: 100px solid #333;
}
/* 右 */
.san_you {
width: 0;
height: 0;
border-top: 50px solid transparent;
border-right: 100px solid #0066ff;
border-bottom: 50px solid transparent;
}
</style>
</head>
<body>
<!-- 上 -->
<div></div>
<!-- 下 -->
<div></div>
<!-- 左 -->
<div></div>
<!-- 右 -->
<div></div>
</body>
</html>
06
最后在浏览器里预览的效果如下：
好了，以上就是大致内容了，(END)
注意一点，width与height最好都设为0
共同分享，共同成长。
侵权/下架等问题请将详细资料（包括资料证明，侵权链接）等相关信息发送至邮箱：423292473@qq.com