CSS基础知识总结（4）

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

A：正方形

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

B：圆形

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

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