CSS Border高级使用实例分享(三角等形状)

CSS的border属性被广泛运用在网页中，其不仅可以添加边框并调整边框的宽度、样式、颜色等属性，同时也可以通过一些高级技巧实现一些有趣的效果。其中较为常见的包括实现三角、梯形、菱形等形状。

实现三角形状的方式

实现三角形状的效果有多种方法，下面提供两种实现方式：

方法一：使用border实现三角形

通过设置元素的宽高为0，同时将它的三边样式设置为transparent，其中第四边使用border-width来实现三角形状，这个方式相对简单而且代码量较少。具体实现代码如下：

.triangle{
    width: 0;
    height: 0;
    border-width: 50px;
    border-style: solid;
    border-color: transparent transparent red transparent;
}

可以看到，代码中border-width的值决定了实现的三角形大小，而border-color的透明属性又决定了其中三边的样式，进而完成了三角形状的效果。

方法二：使用伪类实现三角形

除了上述方法，还可以通过使用伪类:before/:after来实现三角形状。实现的思路是创建一个相对定位的父元素，其中伪类担任边框的角色。具体实现代码如下：

.triangle{
    position: relative;
    width: 100px;
    height: 100px;
}

.triangle:before{
    content: "";
    position: absolute;
    width: 0;
    height: 0;
    border-width: 50px;
    border-style: solid;
    border-color: transparent transparent red transparent;
    top: -50px;
    left: 0;
}

跟方法一类似，这里通过border-style和border-color的设置来实现伪类的三边样式，实现三角形的核心代码与方法一相同，这里不再赘述。

实现梯形/菱形等形状的方式

除了实现三角形外，还可以利用border属性实现其他形状的效果。其中，梯形、菱形等效果的实现也比较简单。

实现梯形的方式

通过设置元素的border-width属性，在不同边界线上设置不同的宽度实现梯形状。根据梯形的性质，可以动态改变梯形的大小、颜色及倾斜角度。具体代码实现如下：

.trapezoid{
    border-bottom: 100px solid #F00;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    height: 0;
    width: 300px;
}

在这个例子中，设置元素的底边宽度为100px，同时在左右两侧分别设置了50px的透明宽度，而高度为0px。根据三角形的性质，这个元素就可实现梯形状。

实现菱形的方式

通过border属性设置两个边框的颜色为transparent，并在另外两个边界设置不同大小的边框，从而实现菱形状。具体代码实现如下：

.rhombus{
    height: 0;
    width: 0;
    border: 50px solid transparent;
    border-top-color: #F00;
    border-bottom-color: #F00;
}

通过这段代码实现了一个红色的菱形，其中height和width值为0，因此这个元素实际上没有任何的内容。通过设置border的上下颜色实现颜色的变化，同时两边的边框宽度也可变化实现动态的形状变化。

在将上述代码放到HTML中运行时，会从画面中呈现一个渐变、丝缎般光泽的红菱形。实现流程也比较简单，只需修改相应的border属性值及颜色即可。

参考链接：

[1] https://www.jb51.net/css/487699.html

[2] https://www.jb51.net/css/551588.html