欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

css 画三角形

程序员文章站 2022-07-02 14:49:00
css三角形 ......
<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三角形