在家待了快两周了，又进入了半死的状态。来写篇 blog 振奋下精神吧。
昨天在做一个类似与 weibo 上评论的东西，在点击评论按钮后会显示评论框。而这个评论框在它的右上角会有一个小三角与评论按钮相呼应。
之前在一本书里面见过，（这本书似乎是台湾人写的，当时觉得它讲的特别相近，不过有些年头了，都忘记它叫什么了，刚才在豆瓣上用 CSS 的关键词找了下，也没找到。），是采用 0 宽度， 0 高度用厚边框挤压出来的三角形。就是说，当对一个 0 空间的元素给予一个很厚的边框的时候，那么四个方向(top left right bottom)的边框会相互挤压，变成三角形！那么，对三个方向的边框给予透明 transparent，而给予另一个方向的边框一个可见色，那三角形就大功告成了！
代码：JS Bin
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
<div class="arrow-up"></div>
<div class="content">
</div>
</body>
</html>
[/code]
[code lang="css"]
.arrow-up {
position: relative;
left: 95%;
height: 0;
width: 0;
border-width: 7px;
border-color: transparent;
border-style: solid;
border-bottom-color: #f1f1f1;
}
.content {
height: 100px;
background-color: #f1f1f1;
}不过这里有个问题，可以看的出来，在微博里面，人家的那个小三角是有边框的！
加上边框，就瞎了吧。这里，在 bootstrap popover 的代码来看到了它的神方法：用两个小三角叠加出边框的效果！一个三角为边框颜色，另一个三角为背景颜色覆盖在上面。且第二个三角的位置稍微向下，一方面可以显示出三角形的边框，另一方面可以覆盖三角下面矩形的边框部分。
代码：JS Bin
.arrow-up, .arrow-up:after {
height: 0;
width: 0;
border-width: 7px;
border-color: transparent;
border-style: solid;
}
.arrow-up {
position: relative;
left: 93%;
border-bottom-color: gray; /* border-color */
}
.arrow-up:after {
content: "";
display: block;
/* overlay */
position: absolute;
left: -7px;
top: -6px; /* and show 1px */
border-bottom-color: #f1f1f1; /* background-color */
}
.content {
height: 100px;
background-color: #f1f1f1;
border: 1px solid gray;
}最后附上一个用 CSS 做小三角的网站 https://apps.eky.hk/css-triangle-generator/