css实现一个缺口小三角

Posted 党兴明

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了css实现一个缺口小三角相关的知识,希望对你有一定的参考价值。

.square{  
     width:0;  
     height:0;  
     margin:0 auto;  
     border:6px solid transparent;  
     border-bottom: 6px solid red;  //自行调整方向,.
 } 

带缺口的三角形:

<div class="box b1"></div>  
<div class="box b2"></div> 
.box{  
    position: absolute;  
    left: 0;  
    top: 0;  
    width: 0;  
    height:0;  
    border: 6px solid transparent;  
}  
.b1{  
    border-bottom-color:#000 ;  
}  
.b2{  
    border-bottom-color:#fff ;  
} 

 

以上是关于css实现一个缺口小三角的主要内容,如果未能解决你的问题,请参考以下文章

为啥这个 CSS 片段可以画一个三角形? [复制]

CSS实现三角形

小技巧只用css实现带小三角的对话框样式

css怎么实现小的倒三角

css3 代边框的小三角怎么做

使用CSS 做小三角边框,原理及实现