一、前言
利用CSS的border属性可以生成一些图形，例如三角或是圆角。纯粹的CSS2的内容，没有兼容性的问题，CSS border属性生成三角的原理，以及实例。我觉得此技术相当实用的，好了，裹脚布的话就不说了，直接进入正题。
二、CSS border生成三角技术案例源码
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.test1 {
width: 0;
height: 0;
line-height: 0px;
font-size: 0px;
border-width: 20px 10px;
border-style: solid;
border-color: #ff3300 #ffffff;
border-color: #ff3300 #ff3300 #ffffff #ffffff;
}
.test{width:10px; height:10px; border:10px solid; border-color:#ff3300 #fff #fff #fff;}
.box{width:500px;}
.top{border-bottom:3px solid; border-bottom-color:#cc0000; border-left:3px dotted transparent; border-right:3px dotted transparent;}
.center{padding:10px 20px; color:white; font-size:14px; background:#cc0000;}
.bot{border-top:3px solid; border-top-color:#cc0000; border-bottom-color:#cccccc; border-left:3px dotted transparent; border-right:3px dotted transparent;}
.org_box {
height: 50px;
line-height: 50px;
width: 500px;
background-color: pink;
padding-left: 2em;
position: relative;
}
.org_bot_cor {
height: 0;
width: 0;
line-height: 0;
font-size: 0px;
border-width:20px 15px ;
border-style: solid;
border-color: pink transparent transparent transparent;
position: absolute;
bottom:-40px;
left:50px;
}
.org_box1{
height:80px;
line-height:80px;
margin-bottom:30px;
padding-left:2em;
background:#F3961C;
position:relative;
}
.org_bot_cor_2{
height: 0;
width: 0;
line-height: 0;
font-size: 0px;
border:20px solid ;
border-color: #F3961C transparent transparent transparent;
position: absolute;
bottom:-40px;
left:50px;
left:60px;
bottom:-40px;
}
</style>
</head>
<body>
<div class="test1"></div>
<div class="test"></div>
<div class="test2"></div>
<div class="test3"></div>
<br><br><br>
<div class="box">
<div class="top"></div>
<div class="center">我是一只小小鸟、小小鸟！</div>
<div class="bot"></div>
</div>
<br><br><br>
<div class="org_box">
<span class="org_bot_cor"></span>
边框法实现底部90度尖角对话框
</div>
<br><br><br>
<div class="org_box1">
<span class="org_bot_cor_2"></span>
字符法实现底部90度尖角对话框
</div>
</body>
</html>
