【学习】css画三角形原来这么简单

最新推荐文章于 2024-08-12 10:59:58 发布

婧大

最新推荐文章于 2024-08-12 10:59:58 发布

阅读量229

点赞数 1

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

本文链接：https://blog.csdn.net/qq_45678607/article/details/108100658

版权

前端CSS 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

css画三角形

我们有一个div元素，并给它设置了如下的样式，之所以把边框宽度设置成50px，计算机处理时，在边框交接处，一边占用一半的面积。

<div class="div"></div>
.div{
      width: 0;
      height: 0;
      border-top: 50px solid rgb(174, 196, 96);
      border-right: 50px solid red;
      border-bottom: 50px solid rgb(250, 149, 211);
      border-left: 50px solid rgb(142, 240, 232);
    }

效果如下：
在这里插入图片描述
这时候将左右下边框设置成transparent，就可以画出一个三角形（注意这是画三角形的精髓所在）

<div class="down"></div>
  .down{
      width: 0;
      height: 0;
      border-top: 50px solid rgb(174, 196, 96);
      border-right: 50px solid transparent;
      border-bottom: 50px solid transparent;
      border-left: 50px solid transparent;
    }