上三角形

1
2
3
4
5
6
7
#top{
width: 0;
height: 0;
border-bottom: 20px solid #fff;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
}

左三角形

1
2
3
4
5
6
7
#left{
width: 0;
height: 0;
border-right: 20px solid #fff;
border-bottom: 20px solid transparent;
border-top: 20px solid transparent;
}

右上三角形

1
2
3
4
5
6
#rightbottom{
width: 0;
height: 0;
border-right: 20px solid #fff;
border-bottom: 20px solid transparent;
}

左上三角形

1
2
3
4
5
6
#lefttop{
width: 0;
height: 0;
border-left: 20px solid #fff;
border-bottom: 20px solid transparent;
}

原理

一个div的四条border如果不同颜色话

不同颜色的边框

再将width和height清零

width和height清零

一个top的三角形需要transparent的border-left和border-right撑起来

类似三角形

如果缺少border-left

缺少border-left

可以想象出,对于top的三角形,border-left和border-right设置三角形的宽度,border-bottom设置三角形的高度

应用对话框

应用对话框

1
2
3
4
5
6
7
8
#dialog{
position: relative;
width: 120px;
height: 50px;
margin-left: 30px;
background: red;
border-radius: 10px;
}
1
2
3
4
5
6
7
8
9
10
11
#dialog:before{
position: absolute;
content:"";
right:100%;
top: 12px;
width: 0;
height: 0;
border-top: 13px solid transparent;
border-bottom: 13px solid transparent;
border-right: 13px solid red;
}

CSS中圆形相关

圆圈

圆形

阴影

规则的图形大多可以通过box-shadow ,来实现阴影的效果。而一些投影的效果和不规则的阴影效果,则可以通过drop-shadow

波浪线

syntax: linear-gradient(direction, color-stop 1, color-stop 2, color-stop 3… )

根据设置重复的颜色和透明度,控制交错的角度,即可还原出波浪线的视觉效果

梯形

利用transform中的skew,对图形进行2d旋转倾斜。

skew属性个人理解成任意一个不规则的图形,假想它的外部有垂直于x轴和y轴的贴合框,则该属性中的角度,则是矩形框与x / y轴对应的夹角。原本的图形也就会产生相应的形变。