css 实现三角形、梯形、平行四边形、爱心等形状css 要想实现三角形、梯形灯形状，主要利用 border 的相关特性。

css 是一门很高深的学问，是前端页面是否好看的支柱。之前一直小看了css的力量，最近看其他博主的书才明白自己的css是多么的菜，以为会点布局就是css了有点贻笑大方了。这篇博客利用css 实现各种形状的编写。

完整代码 github.com/shenweizhen…

css 要想实现三角形、梯形灯形状，主要利用 border 的相关特性。那么首先看一下border属性，我们给一个div设置很宽的border。

width: 40px;
height: 40px;
border-top: 50px solid red;
border-left: 50px solid black;
border-right: 50px solid yellow;
border-bottom: 50px solid blue;

效果为：

image_1dhe36eagier2e71cekou71g6r9.png-3kB

为了看起来清楚一点，我用了四种不同的颜色进行区分。那么我们设置 width 和 hight 都为 0 ，也就是content所占据的面积为0 那么在标准盒模型下，整个div所展示的面积就会由我们的border的宽度所占据，毕竟我们这里没有margin 和 padding。

width: 40px;
height: 40px;
border-top: 50px solid red;
border-left: 50px solid black;
border-right: 50px solid yellow;
border-bottom: 50px solid blue;

image_1dhe3fpe91mi59qlo4j1evr1i6pm.png-2.5kB

如果我们只需要下面蓝色的那个三角形，只需要不设置上边框，然后左右两个边框的颜色为透明的就可以。当然也可以设置除了蓝色的其余边边框的颜色为透明的也可以。

width: 0;
height: 0;
border: 50px solid transparent;
border-bottom-color: blue;

image_1dhe3upqv16sfov16l7tcdep113.png-1.8kB

接下来我们看一下改变三角形的变长，大家都知道改变边框的宽度用的是 border-width 属性。我们可以逐渐的加大 border-bottom 试试 border-bottom 为 100 px 时：

image_1dhe49cdo1ke3157mvr917gp1pua1g.png-2.7kB

可以看的出来时三角形的高变大了，而不是三角形的底变大了。之前我也在懵逼为什么会是这样的，结果我发现对 border-width 的了解出现了偏差。事实上，border-width 是这样的：

image_1dhe5d7ea36mceuqqq1ij4r401t.png-33.4kB

图中的这条白线才是 border-width。那么同样的，蓝色三角形的边长是 border-left-width 加上 border-right-width 的和，高度为 border-bottom-width。

直角三角形

上面说了三角形的边和高的构成，那么直角三角形就是将border-left 或者 border-right其中一个置为0；

width: 0;
height: 0;
border-left: 50px solid transparent;
border-bottom: 50px solid blue;

image_1dhe5n3ab15sbemfjog1brsp882a.png-0.9kB

等边三角形

等边三角形的定义是三角形的三边长相等，高为边的 $\sqrt 3$ , 那么高是由border-bottom-width控制的，而变长是由 border-left-width 与 border-right-width 的和。那么如果我们的 border-left-width 和 border-right-width 都为 50px 的话，高就是 $50\sqrt 3$ , 粗略的为 86px

width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 86px solid blue;

image_1dhe67t11uj4kt01k3bbb9sjl2n.png-2.8kB

梯形

直角梯形

只需要将上边框取消，左右选取一个将其颜色置为透明

width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid yellow;
border-bottom: 50px solid blue;

image_1di4cei5b12bm1e28ipfmn41g8k9.png-2.1kB

普通梯形

普通梯形的上边框需要使用width属性指定，要给他一定的宽度

width: 25px;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 50px solid blue;

image_1di4chtfv1ls718n7p4d1rr68vam.png-1.7kB

菱形

这个就简单了，只要将正方形旋转 45 度。

width: 0;
height: 0;
border-top: 50px solid red;
border-left: 50px solid black;
border-right: 50px solid yellow;
border-bottom: 50px solid blue;
transform: rotate(45deg);

image_1di4dvmqhsnt1hmfr8216cd1r8013.png-3.8kB

平行四边形

借助 transform 中的 skew 属性来实现，由于直接在div中使用，会导致内部的字体也会相应的倾斜，一种解决方案是对里面的文本加一个反向的倾斜，另一种解决方案是利用为元素进行倾斜，这样内部的文本就不会继承倾斜了。

.rhomboid{
    width: 100px;
    height: 100px;
    position: relative;
}
.rhomboid::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: -1;
    background: blue;
    transform: skew(45deg);
}

image_1di4fae5a1t7316a01oqc1opu7cq1g.png-3.3kB

爱心

爱心可以通过的其他元素进行遮掩拼接实现。首先画一个正方形

.love{
    width: 100px;
    height: 100px;
    background: red;
}

image_1di4mgturg9ud8j4gt1h8f4er1t.png-1.1kB

通过为元素画两个圆覆盖在正方形上

        .love::before{
            content: '';
            width: 100px;
            height: 100px;
            position: absolute;
            top: 0;
            left: -50px;
            border-radius: 50%;
            background: yellow;
        }
        .love::after{
            content: '';
            width: 100px;
            height: 100px;
            position: absolute;
            top: -50px;
            left: 0;
            border-radius: 50%;
            background: yellow;
        }

image_1di4mkpv0lp8se91sink8t2p22a.png-4.1kB

image_1di4mlfpfkip1k76v917cmfl2n.png-5.4kB

旋转 45 度颜色改成一致的

image_1di4mmm0r1l5l1prvr8m8p43rr34.png-5.9kB