CSS画三角形图标

最新推荐文章于 2024-06-19 14:48:22 发布

dh7999

最新推荐文章于 2024-06-19 14:48:22 发布

阅读量278

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/lihaiwei/p/9174826.html

本文详细介绍如何使用CSS边框属性纯代码绘制不同方向的等腰三角形和直角三角形，包括箭头朝上、朝下、朝左、朝右及左上和右下方向的三角形。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

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

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

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

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

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