用css画三角形_css 正方形上方三角形-CSDN博客

本文链接：https://blog.csdn.net/qq_40198520/article/details/114484890

一步一步来

1.画一个宽高为80px，边框宽度为30px的正方形

    div{
      width: 80px;
      height: 80px;
      border: 30px solid;
      border-color: rgb(214, 102, 120) rgb(55, 15, 167) rgb(19, 18, 18) rgb(141, 212, 27) ;
    }

没想到是这样的…

2.继续…将宽高设为0px

    div{
      width: 0px;
      height: 0px;
      border: 30px solid;
      border-color: rgb(214, 102, 120) rgb(55, 15, 167) rgb(19, 18, 18) rgb(141, 212, 27) ;
    }

在这里插入图片描述
哎，还是没想到…

3.想得到什么样的三角形信手拈来！

（1）粉色三角
在这里插入图片描述

    div{
      width: 0px;
      height: 0px;
      border: 30px solid;
      border-color:rgb(214, 102, 120) transparent transparent transparent;
    }

（2）黑色三角
在这里插入图片描述

    div{
      width: 0px;
      height: 0px;
      border: 30px solid;
      border-color:transparent transparent rgb(19, 18, 18) transparent;
    }

（3）绿色三角
在这里插入图片描述

    div{
      width: 0px;
      height: 0px;
      border: 30px solid;
      border-color:transparent transparent transparent rgb(141, 212, 27);
    }

（4）紫色三角
在这里插入图片描述

    div{
      width: 0px;
      height: 0px;
      border: 30px solid;
      border-color:transparent rgb(55, 15, 167) transparent transparent;
    }

（5）右上三角
在这里插入图片描述

    div{
      width: 0px;
      height: 0px;
      border: 30px solid;
      border-color:rgb(214, 102, 120) rgb(214, 102, 120) transparent transparent;
    }

（6）左上三角
在这里插入图片描述

    div{
      width: 0px;
      height: 0px;
      border: 30px solid;
      border-color:rgb(214, 102, 120) transparent transparent rgb(214, 102, 120);
    }

（7）左下三角
在这里插入图片描述

    div{
      width: 0px;
      height: 0px;
      border: 30px solid;
      border-color:transparent  transparent rgb(214, 102, 120) rgb(214, 102, 120);
    }

（8）右下三角
在这里插入图片描述

    div{
      width: 0px;
      height: 0px;
      border: 30px solid;
      border-color:transparent  rgb(214, 102, 120) rgb(214, 102, 120) transparent;
    }

大功告成啦！