CSS绘制形状（三角形、四分之一圆、半圆、圆、梯形、球体、菱形）

CSS绘制形状（三角形、四分之一圆、半圆、圆、梯形、球体、菱形）

三角形

        div {
            width: 0;
            height: 0;
            border: 200px solid transparent;
            border-bottom-color: black;
        }

直角三角形

 div {
            width: 0;
            height: 0;
            border-top: 50px solid transparent;
            border-right: 40px solid pink;
            border-bottom: 50px solid pink;
            border-left: 40px solid transparent;
        }

注意：CSS绘制三角形的时候一定要 设置宽高为0；

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

半圆

 div {
            width: 50px;
            height: 100px;
            border-radius: 50px 0 0 50px;
            background-color: red;
        }

注意：不是50%，而是50px；border-radius的顺序是左上、右上、右下、左下。
四分之一圆

 div {
            width: 50px;
            height: 50px;
            border-radius: 50px 0 0 0;
            background-color: red;
        }

梯形

div {
            width: 50px;
            height: 100px;
            border: 50px solid transparent;
            border-bottom-color: red;
        }

球体

  div {
            width: 100px;
            height: 100px;
            border-radius: 50%;
            background: radial-gradient(circle at 70px 70px,#ccc, blue);
        }

radial-gradient(circle at 70px 70px,#ccc, blue);径向渐变：径向渐变是从“一个点”向四周的颜色渐变。
这句代码翻译过来就是说：圆的中心在70px,70px处，颜色由#ccc逐渐扩散为blue；
linear-gradient（to right top,red 25%,blue）;线性渐变：线性渐变是从“一个方向”向“另一个方向”的颜色渐变。
这句代码翻译过来就是说：从左下角到右上角，红色在25px处逐渐变为蓝色。
linear-gradient(to right ,red,blue);==linear-gradient(to right,red 0,blue100%);

  div {
            width: 100px;
            height: 100px;
            background: linear-gradient(to right, red 50%, blue 50%);
        }

椭圆

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

菱形

div {
            margin: 70px auto;
            width: 100px;
            height: 100px;
            background-color: transparent;
            transform: rotateZ(45deg)skew(30deg, 30deg);
            border: 10px solid pink;
        }

transform: rotateZ(45deg)skew(30deg, 30deg);
翻译：图形绕Z轴旋转45度，水平方向上倾斜30度，垂直方向上倾斜30度。skew值越大，菱形越“瘦”。