css绘制三角形

最新推荐文章于 2023-04-11 10:00:22 发布

曲小强

最新推荐文章于 2023-04-11 10:00:22 发布

阅读量200

点赞数 1

CC 4.0 BY-SA版权

分类专栏： CSS 文章标签： css三角形

本文链接：https://blog.youkuaiyun.com/quhongqiang/article/details/84767056

CSS 专栏收录该内容

40 篇文章

订阅专栏

.triangle-up { 
      width: 0; 
      height: 0; 
      border-left: 50px solid transparent; 
      border-right: 50px solid transparent; 
      border-bottom: 100px solid red; 
    }
    .triangle-down { 
      width: 0; 
      height: 0; 
      border-left: 50px solid transparent; 
      border-right: 50px solid transparent; 
      border-top: 100px solid red; 
    }
    .triangle-left { 
      width: 0; 
      height: 0; 
      border-bottom: 50px solid transparent;
      border-right: 100px solid red;
      border-top: 50px solid transparent;
    }
    .triangle-right {
      margin-left: 10px;
      width: 0; 
      height: 0; 
      border-bottom: 50px solid transparent;
      border-left: 100px solid red;
      border-top: 50px solid transparent;
    }

<div style="display: flex;">
    <div class="triangle-up">正三角</div>
    <div class="triangle-down">倒三角</div>
    <div class="triangle-left">左三角</div>
    <div class="triangle-right">有三角</div>
  </div>