CSS中三角形相关
上三角形
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清零
一个top的三角形需要transparent的border-left和border-right撑起来
如果缺少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中圆形相关
圆圈
1
2
3
4
5
6
| .circle {
width: 100px;
height: 100px;
border-radius: 50px;
border: 1px #6C93D0 solid;
}
|
圆形
1
2
3
4
5
6
| .roundness{
width: 100px;
height: 100px;
border-radius: 50px;
background-color: #6C93D0;
}
|
原理
原理一看就明白啦，不再赘述。border-radius按道理是宽高的一半即可，超过也会显示正常。