css 画三角形

2018-06-24 02:16:56来源:未知 阅读 ()

新老客户大回馈,云服务器低至5折

<div class='triangle-rihgt'></div>
<div class='triangle-top'></div>
<div class='triangle-left'></div>
<div class='triangle-bottom'></div>

 

.triangle-rihgt{
	width: 0;
	height: 0;
	border-bottom:10px solid  transparent;
	border-top:10px solid  transparent;
        border-left: 20px solid  red;
}
.triangle-left{
	width: 0;
	height: 0;
	border-bottom:10px solid  transparent;
        border-top:10px solid  transparent;
	border-right: 20px solid  green;
}
.triangle-top{
	width: 0;
	height: 0;
	border-right:10px solid  transparent;
	border-left:10px solid  transparent;
	border-bottom: 20px solid  #333;
}
.triangle-bottom{
	width: 0;
	height: 0;
	border-right:10px solid  transparent;
	border-left:10px solid  transparent;
	border-top: 20px solid  #999;
}

  

 

 

css三角形

 
 
 
 

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:css 单位px、em、rem、vh、vw、vmin、vmax区别

下一篇:CSS3伪元素、伪类选择器