淘先锋技术网

首页 1 2 3 4 5 6 7

CSS中有一种常见的图形——等边三角形,通常用于箭头或者标签的设计。下面将介绍如何实现一个CSS等边三角形。


.triangle{
  width: 0;
  height: 0;
  border-top: 50px solid transparent;
  border-left: 50px solid white;
  border-right: 50px solid white;
}

css等边三角形代码

上面的CSS代码中有四个属性,分别是:widthheightborder-topborder-leftborder-right。下面将一一介绍。

width 和 height

实现CSS等边三角形的第一步是将元素的widthheight设置为0,这可以通过简单地将它们的值设为0来实现,如下所示:


.triangle{
  width: 0;
  height: 0;
}

border-top

接下来,我们向元素的顶部添加一个透明的边框border-top


.triangle{
  border-top: 50px solid transparent;
}

我们设置这个边框的宽度为50像素,这是等边三角形的高度。我们将其颜色设置为透明,以确保等边三角形的顶部为一个封闭的点。

border-left 和 border-right

最后,我们向元素的左边和右边添加白色的边框 border-leftborder-right


.triangle{
  border-top: 50px solid transparent;
  border-left: 50px solid white;
  border-right: 50px solid white;
}

我们将其颜色设置为白色,以便得到一个白色的等边三角形。

以上是一个用CSS代码实现等边三角形的方法,你可以根据自己的需求对上述代码进行修改或扩展。