CSS画图

本文最后更新于：2021年4月8日 下午

用CSS画出图形

矩形


1
2
3
4
5
#rectangle {
  width: 100px;
  height: 100px;
  background: teal;
}

三角形

等腰三角形

  1. 上三角


    1
    2
    3
    4
    5
    6
    7
    8
    9
    #triangle-up {
       width: 0;
       height: 0;
       /*  三角形的高度  */
       border-left: 50px solid transparent;
       border-right: 50px solid transparent;
       /*  三角形的底长  */
       border-bottom: 100px solid teal;
    }
    1. 下三角


      1
      2
      3
      4
      5
      6
      7
      #triangle-down {
         width: 0;
         height: 0;
         border-left: 50px solid transparent;
         border-right: 50px solid transparent;
         border-top: 100px solid teal;
      }
      1. 左三角


        1
        2
        3
        4
        5
        6
        7
        #triangle-left {
           width: 0;
           height: 0;
           border-top: 50px solid transparent;
           border-bottom: 50px solid transparent;
           border-right: 100px solid teal;
        }
        1. 右三角


          1
          2
          3
          4
          5
          6
          7
          #triangle-right {
             width: 0;
             height: 0;
             border-top: 50px solid transparent;
             border-bottom: 50px solid transparent;
             border-left: 100px solid teal;
          }

          直角三角形

          1. 左上三角


            1
            2
            3
            4
            5
            6
            7
            8
            #triangle-topleft {
               width: 0;
               height: 0;
               /*  三角形的高  */
               border-top: 120px solid teal;
               /*  三角形的上底  */
               border-right: 100px solid transparent;     
            }
            1. 右上三角


              1
              2
              3
              4
              5
              6
              #triangle-topright {
                 width: 0;
                 height: 0;
                 border-top: 120px solid teal;
                 border-left: 100px solid transparent;     
              }
              1. 左下三角


                1
                2
                3
                4
                5
                6
                #triangle-bottomleft {
                   width: 0;
                   height: 0;
                   border-bottom: 120px solid teal;
                   border-right: 100px solid transparent;     
                }
                1. 右下三角


                  1
                  2
                  3
                  4
                  5
                  6
                  #triangle-bottomright {
                     width: 0;
                     height: 0;
                     border-bottom: 120px solid teal;
                     border-left: 100px solid transparent;     
                  }
web前端学习笔记
#front-end #CSS
web前端学习笔记2.5——CSS画图
http://example.com/posts/32c066a8.html
作者
Fehek
发布于
2020年10月8日
许可协议