纯css制作带三角的边框(附效果图)

下面开始讲解“纯css制作带三角的边框(附效果图)”的完整攻略。

1.需求分析

在页面样式设计中，时常需要添加一些边框来美化页面，如果能够在边框中添加三角形的图形，将会让页面更加丰富和美观。

2.样式实现

首先，我们需要在HTML的某个元素上添加一个类名，假设我们添加的类名为"triangle"。接下来，我们通过以下步骤实现带三角的边框。

2.1 给元素添加边框

通过CSS中的border属性，给元素添加一个边框。示例如下：

.triangle {
    border: 1px solid #333;
}

上述代码中，我们添加了一个黑色的边框。

2.2 隐藏原始边框

为了能够在边框上添加三角形，我们需要隐藏原始的边框。有两种方法可以实现。

方法1：利用伪元素

利用CSS中的伪元素:before和:after，在元素的内部添加伪元素，达到隐藏原始边框的效果。示例如下：

.triangle {
    position: relative;
    border: none;
}

.triangle::before,
.triangle::after {
    content: "";
    position: absolute;
    z-index: -1;
    top: 1px;
    left: 1px;
    right: 1px;
    bottom: 1px;
}

.triangle::before {
    border: 1px solid #333;
}

.triangle::after {
    border: none;
}

上述代码中，我们将元素的边框设为none，并通过:before伪元素添加一个带边框的透明框，并将:after伪元素的边框去掉，达到隐藏原始边框的效果。

方法2：利用outline

在元素添加outline属性，并设定其颜色为与边框同色，宽度与边框宽度相同，达到隐藏原始边框的效果。示例如下：

.triangle {
    border: none;
    outline: 1px solid #333;
}

上述代码中，我们将元素的边框设为none，并通过outline属性添加一个与边框相同颜色和宽度的外层框，达到隐藏原始边框的效果。

2.3 添加三角形

在原始边框的上方，添加一个三角形，达到“带三角的边框”效果。同样有两种方法可以实现。

方法1：利用伪元素

在上述方法1的::before伪元素中，利用border属性画一个三角形，并在伪元素的右下角上重合。示例如下：

.triangle::before {
    content: "";
    position: absolute;
    z-index: 1;
    top: -11px;
    left: calc(50% - 11px);
    border: 10px solid transparent;
    border-bottom-color: #333;
}

上述代码中，我们利用border属性画了一个底边为透明，高为10px的三角形，并将其上边缘与元素顶部重合。

方法2：利用clip-path

利用CSS的clip-path属性，可以裁剪出一个三角形形状，并将其放在元素的顶部中央。示例如下：

.triangle {
    position: relative;
    border: none;
    clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}

上述代码中，我们使用了clip-path属性，它的值为裁剪出来的三角形的坐标系，右上角为坐标原点(0,0)，以此为基础设置三角形的坐标点。

2.4 完成效果

通过以上两种方法，我们就能够实现带有三角形的边框。完整的代码示例如下：

.triangle-container {
    display: flex;
    align-items: center;
    justify-content: center;
}

.triangle {
    position: relative;
    border: none;
    clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}

.triangle::before,
.triangle::after {
    content: "";
    position: absolute;
    z-index: -1;
    top: 1px;
    left: 1px;
    right: 1px;
    bottom: 1px;
}

.triangle::before {
    border: 1px solid #333;
}

.triangle::after {
    border: none;
}

.triangle-v2 {
    position: relative;
    border: none;
    outline: 1px solid #333;
}

.triangle-v2::before {
    content: "";
    position: absolute;
    z-index: 1;
    top: -11px;
    left: calc(50% - 11px);
    border: 10px solid transparent;
    border-bottom-color: #333;
}

3.总结

本文介绍了两种方式实现带三角形的边框，分别为利用伪元素和利用clip-path属性。对于需要美化页面边框的场景，这两种方法都可以达到不错的效果。