如何利用border属性制作小三角形

方式1 使用伪类

利用border的属性 border-style, border-color, border-width, border-top-width等属性，在伪类上制作三角形，当然为了将三角形放到合适的地方，会用到绝对定位的知识，总的来说就3个技巧：

1. border
2. 伪类after, before
3. 绝对定位

下面以向上的三角形为例：

// html
<div class="caret">向上的三角形</div>
// css (sass表示)
body
  padding: 50px

.caret
  width: 150px
  height: 40px
  background-color: #ad3e32
  position: relative
  // 下面属性辅助作用，将字体居中用的
  display: flex
  justify-content: center
  align-items: center
  color: #fff

  &:after
    content: " "
    width: 0
    height: 0
　　// 伪类使用绝对定位
    // 利用top left 将三角形移动到想要的地方
    position: absolute
　　// 这里是border-width 的2倍上移
    top: -16px
    left: 50%
    border-style: solid
    border-color: transparent
    //　这个决定三角形的朝向
    border-bottom-color: #ad3e32
    border-width: 8px
　　margin-left: -8px
  

其余的几个朝向就是改变上面的一些标注的属性，具体ｄｅｍｏ　codepen：

codepen 三角形demo

方式2 使用inherit属性和伪类，css3 transform属性

这个效果和上面的效果有所不同，这个会给提示框添加一个外边框，这个是上面方法实现不了的。

这个效果是在css揭秘这本书上看到的，原来的实现方式是使用 :before + :after的方式，但是效果并不理想。

.tooltip {
  position: relative;

  &:before {
    content: "";
    position: absolute;
    padding: 4px; // 利用padding值给伪元素添加宽高
    top: -.4em;
    left: 1em;
    background-color: inherit; // 继承父元素的背景色
    border: inherit; // 继承父元素的边框属性
    border-bottom: 0;
    border-right: 0;
    transform: rotate(45deg);
  }
}

利用transform和inherit属性制作triangle三角形 -- codepen