Biegral Blog

在网页设计中使用图形而非图片可以提高性能，今天来看看如何用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画三角形和平行四边形