css画三角形的做法

最新推荐文章于 2024-08-20 19:58:02 发布

原创最新推荐文章于 2024-08-20 19:58:02 发布 · 389 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #html #javascript

这篇博客介绍了如何利用CSS来制作直角三角形。通过调整边框颜色和宽度，可以实现不同方向的直角三角形效果。具体步骤包括：选择保留的边框并设置其他边框为零宽度，然后调整边框宽度以形成直角，最后将不需要显示的边框颜色设为透明。

三角形的做法

/* 3.想做直角三角形， */
/* 第一步选择要保留的两个三角形，把要删掉的三角形边框粗细变为零 */
/* 第二步把对应的边框粗细进行设置，top边框大于right边框值 */
/* 第三步把不想显示的边框颜色设为transparent */

     .box {
       border-left: 100px solid pink;
       border-top: 100px solid yellow;
       border-right: 100px solid green;
       border-bottom: 100px solid aqua;
       width: 0;
       height: 0;
     }

       /* 保留看见哪个三角形就把除哪个三角形之外的颜色变为透明transparent*/
       border-left: 100px solid transparent;
       border-top: 100px solid transparent;
       border-right: 100px solid transparent;
       border-bottom: 100px solid aqua;

3.直角三角形

第一步：

第二步:

      /* 3.想做直角三角形， */
      /* 第一步选择要保留的两个三角形，把要删掉的三角形边框粗细变为零 */
      /* 第二步把对应的边框粗细进行设置，top边框大于right边框值 */
      /* 第三步把不想显示的边框颜色设为transparent */
      border-left: 0 solid pink;
      border-top: 200px solid transparent;
      border-right: 100px solid green;
      border-bottom: 0 solid aqua;