css3画各种三角形（transparent）

喜欢吃丸子

于 2022-04-11 21:22:29 发布

阅读量2.2k

点赞数

文章标签： css3 html5

本文链接：https://blog.csdn.net/weixin_43996260/article/details/124108960

版权

CSS 三角形几何形状前端开发图形绘制

关键词由CSDN通过智能技术生成

1.向上的三角

   .top {
            width: 0;
            height: 0;
            border-bottom: 50px solid red;
            border-left: 50px solid transparent;
            border-right: 50px solid transparent;
        }
   <div class="top"></div>

2.向下的三角

.bottom {
            width: 0;
            height: 0;
            border-top: 50px solid blue;
            border-left: 50px solid transparent;
            border-right: 50px solid transparent;
        }
<div class="bottom"></div>

3.向左的三角

.left {
            width: 0;
            height: 0;
            border-right: 50px solid yellow;
            border-top: 50px solid transparent;
            border-bottom: 50px solid transparent;
      }
<div class="left"></div>

4.向右的三角形

.right {
            width: 0;
            height: 0;
            border-left: 50px solid purple;
            border-top: 50px solid transparent;
            border-bottom: 50px solid transparent;
       }
<div class="right"></div>

5.三角形组成的正方形

.square {
            width: 0;
            height: 0;
            border-top: 50px solid skyblue;
            border-bottom: 50px solid purple;
            border-left: 50px solid pink;
            border-right: 50px solid tomato;
        }
<div class="square"></div>

6.四个扇形组成的圆

.circle {
            width: 0;
            height: 0;
            border-top: 50px solid skyblue;
            border-bottom: 50px solid purple;
            border-left: 50px solid pink;
            border-right: 50px solid tomato;
            border-top-left-radius: 50px;
            border-top-right-radius: 50px;
            border-bottom-left-radius: 50px;
            border-bottom-right-radius: 50px;
        }
<div class="circle"></div>

7.左上直角边的三角形

.right-top {
            width: 0;
            height: 0;
            border-top: 100px solid red;
            border-left: 100px solid transparent;
           }
<div class="right-top"></div>

8.右上直角边的三角形

.left-top {
            width: 0;
            height: 0;
            border-top: 100px solid red;
            border-right: 100px solid transparent;
          }
<div class="left-top"></div>

9.左下直角边的三角形

.left-bottom {
            width: 0;
            height: 0;
            border-bottom: 100px solid red;
            border-right: 100px solid transparent;
             }
<div class="left-bottom"></div>

10.右下直角边的三角形

.right-bottom {
            width: 0;
            height: 0;
            border-bottom: 100px solid red;
            border-left: 100px solid transparent;
              }
<div class="right-bottom"></div>