第一種情況：帶邊框的小三角

乍一看，很簡單，做小三角，首先想到的是利用border的transparent特性，可以製作出小三角的效果。但是注意，這個小三角本身就是邊框製作出來的。怎麼能在小三角的外邊再加一層小邊框呢。那就必須再疊加一層一樣的東西，讓兩者有1px的錯位。問題就解決了。不想在頁面新增多餘的無意義的標籤，還想實現這個效果。首先想到的就是用元素的偽類來實現。原理就是這樣，廢話不多說，上程式碼：

.box{
float:left;
position:relative;
width:100px;
height:100px;
border:1px solid red;
margin-left:50px;
margin-right:50px;
margin-top:20px;
margin-bottom:20px;
box-sizing:border-box;
font-size:14px;
padding:10px;
}
.box:before,
.box:after{
position:absolute;
content:" ";
width:0;
height:0;
top:100%;
border:10px solid transparent;
left:50%;
margin-left:-5px;
pointer-events:none;
}
.box:before{
border-top-width:11px;
border-top-color:red;
margin-left:-11px;

}
.box:after{
border-width:9px;
border-top-width:10px;
border-top-color:#fff;
margin-left:-10px;}
 

.box2{
float:left;
position:relative;
width:100px;
height:100px;
border:1px solid red;
margin-left:50px;
margin-right:50px;
margin-top:20px;
margin-bottom:20px;
box-sizing:border-box;
font-size:14px;
padding:10px;
box-shadow:0 0 2px rgba(0,0,0,.5)
}
.box2:before,
.box2:after{
position:absolute;
content:'';
width:14px;
height:14px;
bottom:-8px;
left:50%;
margin-left:-7px;
overflow:hidden;
pointer-events:none;
-webkit-transform:rotate(45deg);
-mz-transform:rotate(45deg);
transform:rotate(45deg);
}
.box2:before{
background:red;
box-shadow:1px 1px 2px rgba(0,0,0,.5)


}
.box2:after{
bottom:-7px;background:#fff;
}