CSS基础知识总结（4）

标签：总结 solid 50px 基础知识 CSS height border transparent red

1、使用CSS绘制一些简单的图形。

A：正方形

        #square{
            width: 100px;
            height: 100px;
            background-color: red;
        }

B：圆形

1         #square{
2             width: 100px;
3             height: 100px;
4             border-radius: 50%;
5             background-color: red;
6         }

C：椭圆形

        #square{
            width: 200px;
            height: 100px;
            border-radius: 50%;
            background-color: red;
        }

D：向上三角形

        #square{             width: 0;             height: 0;             border-left: 50px solid transparent;             border-right: 50px solid transparent;             border-bottom: 50px solid red;/*注意，我们的border-wodth指的是border的高*/         }

E：向下三角形

        #square{
            width: 0;
            height: 0;
            border-top: 100px solid red;
            border-left: 50px solid transparent;
            border-right: 50px solid transparent;
        }

F：左三角形：

        #square{
            width: 0;
            height: 0;
            border-left: 100px solid red;
            border-top: 50px solid transparent;
            border-bottom: 50px solid transparent;
        }

G：左上角三角形

        #square{
            width: 0;
            height: 0;
            border-left: 50px solid red;
            border-top: 50px solid red;
            border-bottom: 50px solid transparent;
            border-right: 50px solid transparent;
        }

H：右上角三角形

        #square{
            width: 0;
            height: 0;
            border-top: 100px solid red;
            border-left: 100px solid transparent;
        }

I：尾部弯曲的箭头

        #arrow{
            position: relative;
            width: 0;
            height: 0;
            border-top: 9px solid transparent;
            border-right: 9px solid red;
            transform: rotate(10deg);
        }

        #arrow::after{
            content: "";
            position: absolute;
            border: 0px solid transparent;
            border-top: 3px solid red;
            border-radius: 15px 0 0 0;
            width: 12px;
            height: 12px;
            top: -12px;
            left: -9px;
            transform: rotate(45deg);
        }

 

标签：总结,solid,50px,基础知识,CSS,height,border,transparent,red
From： https://www.cnblogs.com/TomHard/p/18288685