[分享]css双三角形

CSS可以用于创建各种形状，其中双三角形是一种常见的形状，可以用于菜单、箭头等设计中。本文将介绍如何用CSS创建双三角形。.triangle{ width: 0; height: 0; borderl...

CSS可以用于创建各种形状，其中双三角形是一种常见的形状，可以用于菜单、箭头等设计中。本文将介绍如何用CSS创建双三角形。

.triangle{
  width: 0;
  height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-top: 10px solid #333;
  position: relative;
}
.triangle:before{
  content: ';
  position: absolute;
  top: -10px;
  left: -10px;
  width: 0;
  height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-top: 10px solid #333;
} 

上述代码使用CSS的边框属性来创建三角形。其中，设置边框宽度为0，是为了确保三角形只显示边框而不填充颜色。

首先，我们设置一个空元素，宽高均为0，然后设置左、右两边的边框为透明的，顶部边框为指定颜色，就可以创建一个基本的三角形。

接下来，我们再用一个:before伪元素来创建一个完整的双三角形。因为伪元素是相对于父元素来定位的，所以我们将它定位到父元素的左上角，然后将边框属性设置成与父元素一样，就可以创建出一个相同大小的三角形，然后将其翻转180度即可。

这样，我们就成功地用CSS创建了一个双三角形，可以用它来制作各种漂亮的UI设计。