使用css开发常用形状

清疚 2023-06-16 13:59 12阅读 0赞

1，正方形

.zhengfangxing{
            width:200px;
            height: 200px;
            background: #42b983;
        }

![正方形][20191126192812119.png]

2，长方形

.changfangxing{
            width:200px;
            height: 100px;
            background: #42b983;
        }

![在这里插入图片描述][20191126193446777.png]

3，圆形

.circle{
            width: 200px;
            height: 200px;
            background: #42b983 ;
            border-radius: 50%;
        }

![在这里插入图片描述][20191126193823999.png]

4，椭圆形

.ellipse{
            width: 200px;
            height: 100px;
            background: #42b983 ;
            border-radius: 200px / 100px;
        }

![在这里插入图片描述][20191126194304941.png]

5，上三角形，利用border进行设置

.triangle{
        width: 0;
        height: 0;
        border-left: 50px solid transparent;
        border-right: 50px solid transparent;
        border-bottom: 100px solid #42b983;
    }

![在这里插入图片描述][2019112619483697.png]

6，下三角形

.triangle_down{
        width: 0;
        height: 0;
        border-left: 50px solid transparent;
        border-right: 50px solid transparent;
        border-top: 100px solid #42b983;
    }

![在这里插入图片描述][20191126195841758.png]  
7左三角  
![在这里插入图片描述][20191204193810953.png]

.triangle_left{
        width: 0;
        height: 0;
        border-top: 50px solid transparent;
        border-right: 100px solid #42b983;
        border-bottom: 50px solid transparent;
    }

8有三角  
![在这里插入图片描述][201912041941003.png]

.triangle_right{
        width: 0;
        height: 0;
        border-top: 50px solid transparent;
        border-left: 100px solid #42b983;
        border-bottom: 50px solid transparent;
    }

9左上角  
![在这里插入图片描述][201912041944024.png]

.triangle_left_top{
            width: 0;
            height: 0;
            border-top: 100px solid #42b983;
            border-right: 100px solid transparent;
        }

10 右上角  
![在这里插入图片描述][20191204194545343.png]

.triangle_right_top{
            width: 0;
            height: 0;
            border-top: 100px solid #42b983;
            border-left: 100px solid transparent;
        }

11 左下角  
![在这里插入图片描述][20191204195016494.png]

.triangle_left_bottom{
            width: 0;
            height: 0;
            border-bottom: 100px solid #42b983;
            border-right: 100px solid transparent;
        }

12 右下三角  
![在这里插入图片描述][20191204195131469.png]

.triangle_right_bottom{
            width: 0;
            height: 0;
            border-bottom: 100px solid #42b983;
            border-left: 100px solid transparent;
        }

13 箭头  
![在这里插入图片描述][20191204200011440.png]

.arrow{
            position: relative;
            width: 0;
            height: 0;
            border-top: 9px solid transparent;
            border-right: 9px solid #42b983;
            transform: rotate(10deg);
        }
        .arrow:after{
            content:"";
            position: absolute;
            border:0 solid transparent;
            border-top: 3px solid #42b983;
            border-radius: 20px 0 0 0;
            top:-12px;
            left:-9px;
            width:12px;
            height: 12px;
            transform: rotate(45deg);
        }

[20191126192812119.png]: https://img-blog.csdnimg.cn/20191126192812119.png
[20191126193446777.png]: https://img-blog.csdnimg.cn/20191126193446777.png
[20191126193823999.png]: https://img-blog.csdnimg.cn/20191126193823999.png
[20191126194304941.png]: https://img-blog.csdnimg.cn/20191126194304941.png
[2019112619483697.png]: https://img-blog.csdnimg.cn/2019112619483697.png
[20191126195841758.png]: https://img-blog.csdnimg.cn/20191126195841758.png
[20191204193810953.png]: https://img-blog.csdnimg.cn/20191204193810953.png
[201912041941003.png]: https://img-blog.csdnimg.cn/201912041941003.png
[201912041944024.png]: https://img-blog.csdnimg.cn/201912041944024.png
[20191204194545343.png]: https://img-blog.csdnimg.cn/20191204194545343.png
[20191204195016494.png]: https://img-blog.csdnimg.cn/20191204195016494.png
[20191204195131469.png]: https://img-blog.csdnimg.cn/20191204195131469.png
[20191204200011440.png]: https://img-blog.csdnimg.cn/20191204200011440.png