您的位置：首页 > Web前端 > CSS

CSS画出各种三角形如等边三角形

2013-09-08 14:56 483 查看
下面的代码将演示三角形如何产生
HTML 

<div class="triangles"></div>

LESS 

.triangles { 
border: 50px solid transparent; 
border-top-color: #0075a9; 
border-right-color: #a89a00; 
border-bottom-color: #19a800; 
border-left-color: #a90000; 
width: 0; 
height: 0; 
}

表现情况



单个三角形
HTML 

<div class="triangle v-top"></div> 
<div class="triangle v-right"></div> 
<div class="triangle v-bottom"></div> 
<div class="triangle v-left"></div>

LESS 

.triangle { 
border: 30px solid transparent; 
width: 0; 
height: 0; 
&.v-top { 
border-top-color: #0075a9; 
} 
&.v-right { 
border-right-color: #a89a00; 
} 
&.v-bottom { 
border-bottom-color: #19a800; 
} 
&.v-left { 
border-left-color: #a90000; 
} 
}

表现



进阶：等边三角形

由于使用边框***出三角形的特性，使得默认***出来的三角形为等腰，如果在特殊情况下需要一个等边的三角形，需要使用特殊的技巧
HTML 

<div class="equilateral-triangle"></div>

LESS 

.equilateral-triangle { 
@side_length: 50px; 
@altitude: (@side_length * ( sqrt(5) / 2 ) / 2); 
border: @side_length solid transparent; 
border-bottom-color: #19a800; 
border-left-width: @altitude; 
border-right-width: @altitude; 
width: 0; 
height: 0; 
}

表现

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航