【面试】用CSS画三角形和平行四边形

在网页设计中使用图形而非图片可以提高性能，今天来看看如何用CSS画一些简单的三角形和平行四边形。

先来看如何画一个三角形，在画三角形之前，我们看看下面的代码：

<h2>1.triangle basic shape</h2>
<div class="basic_triangle"></div>

.basic_triangle {width:50px;height:50px;border-width:100px 100px 100px 100px;border-style:solid;border-color:#f9a #f81 #A76 #153;margin:20px auto;
}

效果图如下，当把border的width设置的足够大时，四个边框颜色会形成三角形。当我们把白色部分的宽高设置为0的时候，就会有四个三角形，如小图所示。

基于上面的结果，我们设置对应不要地方的颜色为透明就可以实现各种三角形。

代码如下：

.triangle_up {width:0;height:0;border-width:0px 100px 100px 100px;border-style:solid;border-color:transparent transparent  #A76 transparent;margin:20px auto;
}

其他各个方向的对应修改。

如果要实现一个梯形，在第一个的基础上直接让color为透明就可以了。

.ladder_shape {width:100px;height:50px;border-width:0px 100px 100px 100px;border-style:solid;border-color:transparent transparent #f81 transparent;}

如果我们要实现直角三角形，那么可以设置border-width的值为0.

.triangle_right{width:0;height:0;border-width:0px 100px 100px 0px;  //左边要直角，设置左边width为0.border-style:solid;border-color:transparent transparent  #A76 transparent;margin:20px auto;
}

还有一个，平行四边形，我们可以通过CSS的transform属性来进行拉伸，里面的文字内容进行反方向拉伸。代码如下：

<h2>4.right triangle</h2>
<div class='triangle_right'></div>.parall_shape {width:100px;height:50px;background:#153;transform:skewX(-50deg);margin:20px auto;
}
.parall_shape span{width:100px;text-align:center;display:inline-block;line-height:50px;verticle-align:middle;color:#fff;transform:skewX(50deg); /* 使用相反的拉伸让字体不扭曲 */
}

以上就是CSS画各个形状的方法，如果需要源码，直接点击这里用CSS画三角形和平行四边形