CSS画个三角

最新推荐文章于 2024-08-11 09:38:46 发布

Smiling-haha

最新推荐文章于 2024-08-11 09:38:46 发布

阅读量404

点赞数 2

分类专栏： CSS 文章标签：画个三角 HMTL+CSS三角

原文链接：https://blog.csdn.net/ink_if/article/details/78534815

版权

CSS 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

CSS ：border

1，等腰三角形（箭头向上）

 /* 等腰三角形（箭头朝上）； */
    #div1{
        width: 0;
        height: 0;
        border-bottom: 100px solid cyan;
        border-left: 50px solid transparent;
        border-right: 50px solid transparent;
    }

向上，图：

è¿éåå¾çæè¿°

2，等腰三角形（箭头向下）

/* 等腰三角形（箭头朝下）； */
   #div2{
       width: 0;
       height: 0;
       border-top: 100px solid cyan;
       border-left: 50px solid transparent;
       border-right: 50px solid transparent;
    }

向下，图：

è¿éåå¾çæè¿°

3，等腰三角形（箭头向左）

/* 等腰三角形（箭头朝左）； */
    #div3{
         width: 0;
         height: 0;
         border-right: 100px solid cyan;
         border-top: 50px solid transparent;
         border-bottom: 50px solid transparent;
     }

向左，图：

è¿éåå¾çæè¿°

4，等腰三角形（箭头向右）

 /* 等腰三角形（箭头朝右）； */
    #div4{
          width: 0;
          height: 0;
          border-left: 100px solid cyan;
          border-top: 50px solid transparent;
          border-bottom: 50px solid transparent;
      }

向右，图：

è¿éåå¾çæè¿°

5，等腰三角形（箭头左上）

  /* 直角三角形（箭头左上）； */
    #div5{
         width: 0;
         height: 0;
         border: 50px solid gray;
         border-right: 50px solid transparent;
         border-bottom: 50px solid transparent;
     }

向上，图：

è¿éåå¾çæè¿°

6，直角三角形（箭头右下）


/* 直角三角形（箭头右下）； */
   #div6{
         width: 0;
         height: 0;
         border: 50px solid lightblue;
         border-left: 50px solid transparent;
         border-top: 50px solid transparent;
     }

右下，图：

è¿éåå¾çæè¿°