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值越大,菱形越“瘦”。