CSS 使 Div 三角形的底部

在Web设计中，很常见需要使用三角形来做导航栏、箭头、指示器等等。这时候，我们可以使用CSS来实现Div三角形的底部。

实现原理

实现Div三角形底部其实就是借助CSS的border属性，利用0宽度的border和transparent颜色实现，height、width控制大小，同时也可以使用border-radius属性来实现圆角的效果。

简单示例

下面是一个简单的示例，代码如下：

.triangle {
  width: 0;
  height: 0;
  border-top: 60px solid #f00;
  border-left: 60px solid transparent;
  border-right: 60px solid transparent;
}

<div class="triangle"></div>

效果如下：

带阴影的三角形

下面我们来实现一个带阴影的三角形，代码如下：

.triangle-with-shadow {
  width: 0;
  height: 0;
  border-top: 60px solid #f00;
  border-left: 60px solid transparent;
  border-right: 60px solid transparent;
  box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3);
}

<div class="triangle-with-shadow"></div>

效果如下：

圆角三角形

下面我们来实现一个圆角的三角形，代码如下：

.triangle-with-radius {
  width: 0;
  height: 0;
  border-top: 80px solid #2691d9;
  border-left: 20px solid transparent;
  border-right: 20px solid transparent;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
}

<div class="triangle-with-radius"></div>

效果如下：

小结

通过以上简单的示例，我们可以看到使用CSS实现Div三角形底部是非常容易的，只需要使用border属性和一些其他属性就可以了。希望这篇文章能够对大家有所帮助。