- A+
所属分类:CSS3
正三角
上方边框隐藏,左右两侧的边框透明色
- .just_triangle {
- width: 0;
- height: 0;
- background: transparent;
- border: 50px solid;
- border-top: transparent;
- border-left-color: transparent;
- border-right-color: transparent;
- border-bottom-color: #c40000;
- }
倒三角
下方边框隐藏,左右两侧的边框透明色
- .down_triangle {
- width: 0;
- height: 0;
- background: transparent;
- border: 50px solid;
- border-bottom: transparent;
- border-left-color: transparent;
- border-right-color: transparent;
- border-top-color: #c40000;
- }
左三角
右侧边框隐藏,左右两侧的边框透明色
- .left_triangle {
- width: 0;
- height: 0;
- background: transparent;
- border: 50px solid;
- border-right: transparent;
- border-top-color: transparent;
- border-bottom-color: transparent;
- border-left-color: #c40000;
- }
右三角
左侧边框隐藏,左右两侧的边框透明色
- .right_triangle {
- width: 0;
- height: 0;
- background: transparent;
- border: 50px solid;
- border-left: transparent;
- border-top-color: transparent;
- border-bottom-color: transparent;
- border-right-color: #c40000;
- }
左右对立三角
border默认颜色为黑色,所以当上下颜色透明后,右侧的三角形呈现黑色
- .lr_triangle {
- width: 0px;
- height: 0px;
- background: transparent;
- border: 50px solid;
- border-bottom-color: transparent;
- border-left-color: #c40000;
- border-top-color: transparent;
- }
上下对立三角
border默认颜色为黑色,所以当左右颜色透明后,下侧的三角形呈现黑色
- .tb_triangle {
- width: 0px;
- height: 0px;
- background: transparent;
- border: 50px solid;
- border-left-color: transparent;
- border-top-color: #c40000;
- border-right-color: transparent;
- }