css利用border实现三角效果

UserGuan

已于 2023-09-25 14:54:32 修改

阅读量1.7k

点赞数

CC 4.0 BY-SA版权

分类专栏：前端类文章标签： css css3 前端

于 2022-01-29 11:47:15 首次发布

本文链接：https://blog.csdn.net/AdminGuan/article/details/122741169

前端类专栏收录该内容

52 篇文章

订阅专栏

三角-上

<!-- 三角-上 -->
<div class="triangle_up"></div>

/* 三角-上 */
.triangle_up {
  width: 0;
  height: 0;
  border-bottom: 20px solid red;
  border-left: 20px solid transparent;
  border-right: 20px solid transparent;
}

<!-- 三角-上 -->
<div class="triangle-up"></div>

/* 三角-上 */
.triangle-up {
  position: relative;
  width: 100px;
  height: 100px;
  margin: 100px;
  background-color: red;
}
.triangle-up::before {
  content: "";
  position: absolute;
  top: -50px;
  left: 0;
  width: 0;
  height: 0;
  border-bottom: solid 50px red;
  border-right: solid 50px transparent;
  border-left: solid 50px transparent;
}

三角-下

<!-- 三角-下 -->
<div class="triangle_down"></div>

/* 三角-下 */
.triangle_down {
  width: 0;
  height: 0;
  border-top: 20px solid red;
  border-left: 20px solid transparent;
  border-right: 20px solid transparent;
}

<!-- 三角-下 -->
<div class="triangle-down"></div>

/* 三角-下 */
.triangle-down {
  position: relative;
  width: 100px;
  height: 100px;
  background-color: red;
}
.triangle-down::before {
  content: "";
  position: absolute;
  top: 100px;
  left: 0;
  width: 0;
  height: 0;
  border-top: solid 50px red;
  border-right: solid 50px transparent;
  border-left: solid 50px transparent;
}

三角-左

<!-- 三角-左 -->
<div class="triangle_left"></div>

/* 三角-左 */
.triangle_left {
  width: 0;
  height: 0;
  border-right: 20px solid red;
  border-top: 20px solid transparent;
  border-bottom: 20px solid transparent;
}

<!-- 三角-左 -->
<div class="triangle-left"></div>

/* 三角-左 */
.triangle-left {
  position: relative;
  width: 100px;
  height: 100px;
  margin: 100px;
  background-color: red;
}
.triangle-left::before {
  content: "";
  position: absolute;
  top: 0;
  left: -50px;
  width: 0;
  height: 0;
  border-right: solid 50px red;
  border-top: solid 50px transparent;
  border-bottom: solid 50px transparent;
}

三角-右

<!-- 三角-右 -->
<div class="triangle_right"></div>

/* 三角-右 */
.triangle_right {
  width: 0;
  height: 0;
  border-left: 20px solid red;
  border-top: 20px solid transparent;
  border-bottom: 20px solid transparent;
}

<!-- 三角-右 -->
<div class="triangle-right"></div>

/* 三角-右 */
.triangle-right {
  position: relative;
  width: 100px;
  height: 100px;
  background-color: red;
}
.triangle-right::before {
  content: "";
  position: absolute;
  top: 0;
  left: 100px;
  width: 0;
  height: 0;
  border-left: solid 50px red;
  border-top: solid 50px transparent;
  border-bottom: solid 50px transparent;
}

三角-左上

<!-- 三角-左上 -->
<div class="triangle_left_up"></div>

/* 三角-左上 */
.triangle_left_up {
  width: 0;
  height: 0;
  border-left: 20px solid red;
  border-bottom: 20px solid transparent;
  border-right: 20px solid transparent;
}

三角-左下

<!-- 三角-左下 -->
<div class="triangle_left_down"></div>

/* 三角-左下 */
.triangle_left_down {
  width: 0;
  height: 0;
  border-left: 20px solid red;
  border-top: 20px solid transparent;
  border-right: 20px solid transparent;
}

三角-右上

<!-- 三角-右上 -->
<div class="triangle_right_up"></div>

/* 三角-右上 */
.triangle_right_up {
  width: 0;
  height: 0;
  border-right: 20px solid red;
  border-bottom: 20px solid transparent;
  border-left: 20px solid transparent;
}

三角-右下

<!-- 三角-右下 -->
<div class="triangle_right_down"></div>

/* 三角-右下 */
.triangle_right_down {
  width: 0;
  height: 0;
  border-right: 20px solid red;
  border-top: 20px solid transparent;
  border-left: 20px solid transparent;
}