最近項目上做評論回復，設計師提高交互性特意設計了小三角，如下：
下面介紹一下實現效果的css方法：
1.border 通過設置上下左右border寬度來實現。
首先查看一下全部設置的效果：
<style>
.triangle{
width:30px;
height:30px;
border-width:20px;
border-style:solid;
border-color:#e66161 #f3bb5b #94e24f #85bfda;
}
</style>
<body>
<div class="triangle"></div>
</body>
然后將寬高設為0，就可以得到四個三角形，單獨設置一個border即可得到三角形。
?
將其他邊框都設為透明，可得到三角形
代碼如下：
<style>
.triangle{
width:0px;
height:0px;
border-width:20px;
border-style: solid;
border-color:transparent #e66161 transparent transparent;
}
</style>
<body>
<div class="triangle"></div>
</body>
? ? ?要想實現項目要求的樣式，需要些兩個三角形重疊，然后外面的比內層的多出1px做邊框，利用兩個三角的背景色差實現border效果，
? ? ?
代碼如下：
<style>
.triangle{
width:0px;
height:0px;
border-width:20px;
border-style: solid;
border-color:transparent #C9E9C0 transparent transparent;
}
.triangle-border{
margin-left: 1px;
margin-top: -40px;
width:0px;
border-width:20px;
border-style: solid;
border-color:transparent #E9FBE4 transparent transparent;
}
</style>
<body>
<div class="triangle"></div>
<div class="triangle-border"></div>
</body>
?
2 特殊字符 ◆ 來實現。
? ?這種方法的場景是和矩形框結合，將◆的背景色設置為矩形框的顏色即可。這里就不寫矩形框了。通過調整font來實現調整三角形大小。
?
代碼：
<style>
.triangle{
overflow:hidden;
width:26px;
height:26px;
font:normal 26px "宋體"; // 字符的大小和字體也有關系哦！
}
.tg-border {
color:#C9E9C0;
}
.tg-background {
margin-top: -25px;
color:#E9FBE4;
}
</style>
<body>
<div class="triangle tg-border">◆</div>
<div class="triangle tg-background">◆</div>
</body>
?
3，矩形旋轉45度，
? ? ?缺點是不能控三角形的角度。
<style>
.box {
margin-top: 50px;
position:relative;
width:200px;
height:50px;
background:#E9FBE4;
border:1px solid #C9E9C0;
border-radius:4px;
color:#0C7823;
}
.triangle{
position:absolute;
top:-8px;
left:25px;
width:13px;
height:13px;
background:#E9FBE4;
border-top:1px solid #C9E9C0;
border-left:1px solid #C9E9C0;
}
.transform {
-webkit-transform:rotate(45deg);
-moz-transform:rotate(45deg);
-o-transform:rotate(45deg);
transform:rotate(45deg);
}
</style>
<body>
<div class="box">
<div class="triangle transform"></div>
</div>
</body>
?
 方法)
)
