如何使用css实现一个三角形

最新推荐文章于 2024-06-19 14:48:22 发布

祁祁私语

最新推荐文章于 2024-06-19 14:48:22 发布

阅读量197

点赞数

文章标签： css 前端 javascript

本文链接：https://blog.csdn.net/weixin_57909742/article/details/132269980

版权

利用边框和透明边框

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

.triangle {
  width: 0;
  height: 0;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-bottom: 100px solid #000;
}

利用伪元素和旋转

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

.triangle {
  width: 100px;
  height: 100px;
  position: relative;
}

.triangle::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  border: 50px solid transparent;
  border-bottom-color: #000;
  transform: rotate(45deg);
}

这两种实现方法都能创建一个均等边长的等腰三角形。第一种方法使用了三个边框，并通过设置其中两个边框为透明来形成一个三角形的形状。第二种方法则是利用伪元素 ::before 创建一个旋转后的矩形，从而形成一个三角形的外观。