[分享]css做带边框三角形

CSS可以用来制作漂亮的边框效果，其中包括了带边框的三角形。这种效果比较常见，通常用于指示箭头或标签等。下面我们来看看如何用CSS做出带边框的三角形。.triangle { borderstyle: ...

CSS可以用来制作漂亮的边框效果，其中包括了带边框的三角形。这种效果比较常见，通常用于指示箭头或标签等。下面我们来看看如何用CSS做出带边框的三角形。

.triangle {
  border-style: solid;
  border-width: 20px 15px 0 15px; /* 上下左右 */
  border-color: #ff0000 transparent transparent transparent; /* 颜色 */
  height: 0;
  width: 0;
} 

上面的代码展示了如何用CSS来制作一个带边框的三角形。具体来说，我们使用了border-style来指定边框样式，使用border-width指定上下左右4个方向的边框宽度。这里需要注意的是，上面的边框宽度比较特殊，它定义了上边框宽度、左右边框宽度、以及下边框宽度。这样设置之后，就可以形成一个三角形的形状。

接下来，我们使用border-color属性来指定边框颜色。这里需要把三角形的顶部设置为红色，其他部分设置为透明色。这样就可以形成一个带边框的三角形了。

在上述代码中，我们还设置了height和width属性，把元素的高度和宽度都设置为0。这个之所以要这样设置，是因为我们希望让这个元素只显示边框，而不显示任何实体部分。

总的来说，用CSS制作带边框的三角形还是比较简单的。只需要使用border-style、border-width和border-color属性进行设置，然后再利用height和width把元素的实体部分设为0即可。