css中怎么设置淘宝网三角

淘宝网很常见的一种设计元素就是三角形，它可以被用在各种地方，比如导航栏、按钮等等。在CSS中设置一个三角形非常简单，我们只需要使用一个伪元素和一些基本的CSS属性就能实现。

/*设置三角形*/
.triangle {
  position: relative;
  width: 0;
  height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-bottom: 10px solid red;
}

/*设置伪元素*/
.triangle::before{
  content: ';
  position: absolute;
  top: -10px;
  left: -10px;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-bottom: 10px solid #fff;
}

/*给三角形容器加上背景色*/
.triangle-container {
  background-color: #fff;
  padding: 10px;
} 

我们首先给三角形容器设置一个相对定位，然后在容器内部创建一个宽和高都为0的三角形。这个三角形的三个边框设置为透明色，只有底部的边框需要设置为红色。

接着，我们需要创建一个伪元素，将其定位到三角形的顶部，再将其大小和三角形的大小一致，并将伪元素的底部边框设置为白色，这样就完成了一个完整的三角形。

最后，我们可以给三角形容器添加一些背景颜色和内边距，让整个三角形更好的融入到我们的设计当中。