常见样式问题二、CSS实现普通三角形、空心三角形

1、初识css三角形

第一次知道CSS实现的三角形是在bootstrap源码中看到。bootstrap泡泡提示框的空心三角形就是用css实现的。下面是bootstrap v3.3.6中跟空心三角形相关的代码：

.popover > .arrow,
.popover > .arrow:after {
  position: absolute;
  display: block;
  width: 0;
  height: 0;
  border-color: transparent;
  border-style: solid;
}
.popover > .arrow {
  border-width: 11px;
}
.popover > .arrow:after {
  content: "";
  border-width: 10px;
}
.popover.top > .arrow {
  /*略去无关代码*/
  border-top-color: #999;
  border-top-color: rgba(0, 0, 0, .25);
  border-bottom-width: 0;
}
.popover.top > .arrow:after {
   /*略去无关代码*/  
   content: " ";
  border-top-color: #fff;  
  border-bottom-width: 0;
}

这是bootstrap的泡泡提示框空心下三角的效果

2、css三角形实现原理

之前一直认为边框一定是矩形的，但其实并不是。看下面的代码：

<style>