如何通过CSS绘制三角形和小箭头

1. 绘制三角形的作用，主要是提供指示性，如下图

 2. 那么如何画出三角形呢？我们先看下border的用法

<div class="box"></div>

 .box{
        box-sizing: border-box;
        height: 200px;
        width: 200px;
        border-left: 80px solid red;
        border-right: 80px solid beige;
        border-top: 80px solid green;
        border-bottom: 80px solid yellow;
      }

 效果如图所示，border为1是，看起来是单纯的直线，如果border的长度过长，就是就会形成如下的情况。如果你把上面的css边框都由80px调成100px。就会形成如下的效果。

 .box{
        box-sizing: border-box;
        height: 200px;
        width: 200px;
        border-left: 100px solid red;
        border-right: 100px solid beige;
        border-top: 100px solid green;
        border-bottom: 100px solid yellow;
      }

 这样我们就得到了4个三角形。那我们如果只想得到其中的1个三角形呢，我们就把其他三个border隐藏掉就好了。

3. 画出三角形

<div class="traingle bottom"></div>

 .traingle{
    display: inline-block;
    border: solid 50px transparent;  /*隐藏边框颜色 控制三角形的长边边长*/
 }
 .traingle.bottom{
    border-top-color: green ;  /* top botttom left right 控制三角形方向 */
 }

 4. 画出如上图的气泡提示词效果（口诀：内部元素绝对定位，外部元素相对定位）

 body{
      background-color: #f0f0f0;
    }
    .box{
      box-sizing: border-box;
      width: 200px;
      height: 50px;
      line-height: 30px;
      position: relative;
      padding: 10px;
      background-color: white;
      border-radius: 8px;
    }
    .triangle{
      position: absolute;
      bottom: -30px;
      left: 10px;
      display: inline-block;
      border: 15px solid transparent;
    }
    .triangle.bottom {
      border-top-color: white;
    }

 <div class="box">
        我是气泡框
        <div class="triangle bottom"></div>
    </div>

5. 绘制小箭头

只需要使用after再画一个白色三角形，然后再原来绿色三角形的基础上向右偏移即可。 

.box {
  padding: 15px;
  background-color: #ffffff;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.arrow {
  display: inline-block;
  margin-right: 10px;
  width: 0;
  height: 0;
  /* Base Style */
  border: 16px solid;
  border-color: transparent #cddc39 transparent transparent;
  position: relative;
}

.arrow::after {
  content: "";
  position: absolute;
  right: -20px;
  top: -16px;
  border: 16px solid;
  border-color: transparent #fff transparent transparent;
}
/*下*/
.arrow.bottom {
  transform: rotate(270deg);
}
/*上*/
.arrow.top {
  transform: rotate(90deg);
}
/*左*/
.arrow.left {
  transform: rotate(180deg);
}
/*右*/
.arrow.right {
  transform: rotate(0deg);
}

	<div class="box">
		<div class="arrow"></div>
	</div>