css画三角形的做法

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

南城旧时

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

阅读量311

点赞数

文章标签：前端 html javascript

本文链接：https://blog.csdn.net/qq_52006046/article/details/127857498

版权

三角形的做法

/* 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;