css三角向下写法

CSS三角向下写法是网页设计中经常用到的一种技巧，可以很方便地实现下拉菜单、提示框等效果。下面介绍两种常见的CSS三角向下写法。

CSS三角向下写法一：

.arrow-down {
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 5px solid #000;
}

在这个CSS样式中，我们先确定了元素的宽高为0，然后用border指定了三角形的三个边框，这里我们只需要指定上边框，另外两个边框用transparent隐藏即可。

CSS三角向下写法二：

.arrow-down {
  width: 0;
  height: 0;
  margin: 0 auto;
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  border-top: 7px solid #333;
  position: relative;
  top: 2px;
}
.arrow-down::before {
  content: '';
  display: block;
  width: 0;
  height: 0;
  margin: 0 auto;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 6px solid #fff;
  position: absolute;
  top: -13px;
  left: -6px;
}

在这个CSS样式中，我们同样先确定了元素的宽高为0，然后指定了三角形的三个边框。不同的是，我们用了:before伪元素来隐藏三角形的下部分，同时增加了上部分的白色三角形来达到更好的视觉效果。最后还将整个三角形元素向下偏移2px，让它在文本框的正上方。