使用css开发常用形状

最新推荐文章于 2024-09-25 16:29:08 发布

土垚金鑫

最新推荐文章于 2024-09-25 16:29:08 发布

阅读量105

点赞数

分类专栏： css 文章标签： css 常用形状

本文链接：https://blog.csdn.net/weixin_44994731/article/details/103263539

版权

css 专栏收录该内容

20 篇文章 1 订阅

订阅专栏

1，正方形

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

正方形

2，长方形

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

在这里插入图片描述

3，圆形

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

在这里插入图片描述

4，椭圆形

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

在这里插入图片描述

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

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

在这里插入图片描述

6，下三角形

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

在这里插入图片描述
7左三角

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

8有三角
在这里插入图片描述

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

9左上角
在这里插入图片描述

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

10 右上角
在这里插入图片描述

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

11 左下角
在这里插入图片描述

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

12 右下三角
在这里插入图片描述

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

13 箭头
在这里插入图片描述

    .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);
    }