css三角符号代码

CSS三角符号是Web开发中非常常用的一种形状，可以用于各种场景，比如制作箭头、菜单指向、气泡等等。以下是一些CSS中常用的三角符号代码：

/* 向上的实心三角形 */
.arrow-up {
  width: 0;
  height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-bottom: 6px solid black;
}

/* 向下的实心三角形 */
.arrow-down {
  width: 0;
  height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 6px solid black;
}

/* 向左的实心三角形 */
.arrow-left {
  width: 0;
  height: 0;
  border-top: 6px solid transparent;
  border-right: 6px solid black;
  border-bottom: 6px solid transparent;
}

/* 向右的实心三角形 */
.arrow-right {
  width: 0;
  height: 0;
  border-top: 6px solid transparent;
  border-left: 6px solid black;
  border-bottom: 6px solid transparent;
}

/* 气泡形状 */
.bubble {
  position: relative;
  width: 200px;
  height: 100px;
  background-color: #FFF;
  border: 2px solid #000;
  text-align: center;
  line-height: 100px;
}
.bubble:before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -16px;
  border-width: 16px;
  border-style: solid;
  border-color: transparent transparent #000 transparent;
  transform: translateX(-50%);
} 

以上的代码中，实心三角形使用了border属性来绘制，其中边框颜色设置为黑色，可以根据需求来调整宽度、高度和边框颜色。气泡形状则使用了伪元素:before来实现，类似于在元素前添加了一个三角形，通过调整位置和边框样式来实现气泡形状。使用CSS三角符号可以大大提高Web开发效率，同时也增加了页面的美观度。