CSS-border属性制作小三角

1——三角向上下左上、右上、右下、左下这四个方向突出的样式

 向左上角突出:

border-color: transparent transparent transparent #FFCC00;

border-style:dashed dashed solid solid;

border-width: 0 0 30px 30px ;

向右上角突出：

border-color: #FFCC00 transparent transparent transparent;

border-style:solid dashed dashed solid;

border-width: 30px 0 0 30px;

：如下代码显示，

border-color:transparent #FFCC00 transparent transparent;

border-style:solid solid dashed dashed;

border-width:30px 30px 0 0 ;

向左下角突出：

border-color: transparent transparent #FFCC00 transparent;

border-style:dashed solid solid dashed;

border-width: 0 30px 30px 0;

---------------------------------------------分割--------------------------------------------------

2——三角向上下左右四个方向正中间的样式

：如下代码显示，

border: 20px solid #FFCC00;
border-top-color: transparent;
border-right-color: transparent;
border-bottom-color: transparent;

（ps:同样的效果，减少代码的写法：

：代码：

border: 20px solid transparent;
border-left-color: #776ee2;

）

四个都有颜色,

border-color:#b182e9 #60c69d #e37076 #776ee2;

border-style:solid;

border-width:30px;

3：其他好玩的尝试：

border-color: transparent #e37076 #776ee2 #e37076;

border-style:dashed solid solid solid;

border-width: 0 30px 30px 30px ;

左上右下

border-color: transparent transparent #776ee2 #e37076;

border-style:dashed dashed solid solid;

border-width: 0 0 30px 30px ;

（ps:相同的效果，不同的代码书写：

border-color:#776ee2 #FFCC00 transparent transparent;

border-style:solid solid dashed dashed;

border-width:30px 30px 0 0;）

 右上左下

border-color:transparent #776ee2 #e37076 transparent;

border-style:dashed solid solid dashed;

border-width:0 30px 30px 0;

 ，F12后这是结构图：，就右下角一小块的变色——代码如下：

1. border-style: solid;
2. border-width: 0 0 10px 10px;
3. border-color: transparent transparent #ffffff transparent;

 

2018-03-01 16:19:23

display: inline-block;
margin-left: 5px;
border-color: #4F80FF #fff #fff #fff;
border-style: dashed solid solid solid;
border-width: 8px 5px 3px 5px;