css三角使用

 html

<div class="a">
			 
		 </div>
		 <div class="b">
		 			 
		 </div>
		 <div class="c">
		 			 
		 </div>
		 <div class="d">
		 			 
		 </div>

css

div{
				float: left;
			}
			 .a{
				 width: 0;
				 height: 0;
				 border: 30px solid transparent;
				 border-left-color: #55ffff;
				 margin: 30px;
			 }
			 .b{
				 width: 0;
				 height: 0;
				 border: 30px solid transparent;
				 border-top-color: #55ffff;
				 margin: 30px;
			 }
			 .c{
				 width: 0;
				 height: 0;
				 border: 30px solid transparent;
				 border-right-color: #55ffff;
				 margin: 30px;
			 }
			 .d{
				 width: 0;
				 height: 0;
				 border: 30px solid transparent;
				 border-bottom-color: #55ffff;
				 margin: 30px;
			 }

应用

html

<div class="box">
            <span class="jd">
                
            </span>
        </div>

css

.box{
				 position: relative;
				 width: 50px;
				 height: 50px;
				 background-color: #4ce5e5;
			 }
			 .jd{
				 position: absolute;
				 right: 8px;
				 top: -18px;
				 width: 0;
				 height: 0;
				 /* 照顾兼容性 */
				 line-height: 0;
				 font-size: 0;
				 border: 10px solid transparent;
				 border-bottom-color: #55aaff;
			 }