盒子模型制作三角形在前端面试题中很常见,在实际开发中也经常用到:
盒子模型制作三角形:
三角形本来就属于border.所以css中要有:border-width,border-style,border-color.此外,三角形的底边朝哪边就把哪一个方向的border-color值设为想要的三角形颜色值。另外,三角形的尖尖朝哪个方向就把那个方向的border-width设为0.同时,由于三角形是border,所以可以把width和height设为0px.
举例
三角形朝上:
<div class="triangle_border_up">
</div>
.triangle_border_up{
width:0;
height:0;
border-width:0 30px 30px; //上 左右 下
border-style:solid;
border-color:transparent transparent #333;/*透明 透明 灰*/
margin:40px auto;
position:relative;
}
三角形朝左:
<div class="triangle_border_left">
</div>
.triangle_border_left{
width:0;
height:0;
border-width:30px 30px 30px 0;
border-style:solid;
border-color:transparent #333 transparent transparent;/*透明 灰 透明 透明 */
margin:40px auto;
position:relative;
}