css画三角形

最新推荐文章于 2024-07-19 15:50:46 发布

DHLSP15

最新推荐文章于 2024-07-19 15:50:46 发布

阅读量929

点赞数 14

文章标签： css 前端

本文链接：https://blog.csdn.net/DHLSP15/article/details/135154424

版权

css画三角形

在这里插入图片描述

<!doctype html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport"
    content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>css画三角形</title>
  <style>
    /*向上*/
    .triangle_border_up {
      width: 0;
      height: 0;
      border-width: 0 30px 30px;
      border-style: solid;
      border-color: transparent transparent #67C23A;
      /*透明 透明  灰*/
      margin: 40px auto;
      position: relative;
    }

    .triangle_border_up span {
      display: block;
      width: 0;
      height: 0;
      border-width: 0 28px 28px;
      border-style: solid;
      border-color: transparent transparent #409EFF;
      /*透明 透明  黄*/
      position: absolute;
      top: 0px;
      left: 0px;
    }

    /*向下*/
    .triangle_border_down {
      width: 0;
      height: 0;
      border-width: 30px 30px 0;
      border-style: solid;
      border-color: #67C23A transparent transparent;
      /*灰 透明 透明 */
      margin: 40px auto;
      position: relative;
    }

    .triangle_border_down span {
      display: block;
      width: 0;
      height: 0;
      border-width: 28px 28px 0;
      border-style: solid;
      border-color: #409EFF transparent transparent;
      /*黄 透明 透明 */
      position: absolute;
      top: 0px;
      left: 0px;
    }

    /*向左*/
    .triangle_border_left {
      width: 0;
      height: 0;
      border-width: 30px 30px 30px 0;
      border-style: solid;
      border-color: transparent #67C23A transparent transparent;
      /*透明 灰 透明 透明 */
      margin: 40px auto;
      position: relative;
    }

    .triangle_border_left span {
      display: block;
      width: 0;
      height: 0;
      border-width: 28px 28px 28px 0;
      border-style: solid;
      border-color: transparent #409EFF transparent transparent;
      /*透明 黄 透明 透明 */
      position: absolute;
      top: 0px;
      left: 0px;
    }

    /*向右*/
    .triangle_border_right {
      width: 0;
      height: 0;
      border-width: 30px 0 30px 30px;
      border-style: solid;
      border-color: transparent transparent transparent #67C23A;
      /*透明 透明 透明 灰*/
      margin: 40px auto;
      position: relative;
    }

    .triangle_border_right span {
      display: block;
      width: 0;
      height: 0;
      border-width: 28px 0 28px 28px;
      border-style: solid;
      border-color: transparent transparent transparent #409EFF;
      /*透明 透明 透明 黄*/
      position: absolute;
      top: 0px;
      left: 0px;
    }
  </style>
</head>

<body>
  <!-- 向上的三角形 -->
  <div class="triangle_border_up">
    <span></span>
  </div>

  <!-- 向下的三角形 -->
  <div class="triangle_border_down">
    <span></span>
  </div>

  <!-- 向左的三角形 -->
  <div class="triangle_border_left">
    <span></span>
  </div>

  <!-- 向右的三角形 -->
  <div class="triangle_border_right">
    <span></span>
  </div>
</body>

</html>