[分享]css三角形框

在开发网页时，有时我们需要使用一些特殊的样式，比如三角形框。使用 CSS 可以很轻松地实现此功能。下面介绍两种实现三角形框的方法。方法一： .box { : relative; width: 200p...

在开发网页时，有时我们需要使用一些特殊的样式，比如三角形框。使用 CSS 可以很轻松地实现此功能。下面介绍两种实现三角形框的方法。

方法一：
.box {
    position: relative;
    width: 200px;
    height: 200px;
    background-color: #ddd;
    padding: 20px;
}
.box:before {
    content: "";
    position: absolute;
    top: -20px;
    left: 50%;
    transform: translateX(-50%);
    border-top: 20px solid #ddd;
    border-left: 20px solid transparent;
    border-right: 20px solid transparent;
}
.box:after {
    content: "";
    position: absolute;
    bottom: -20px;
    left: 50%;
    transform: translateX(-50%);
    border-bottom: 20px solid #ddd;
    border-left: 20px solid transparent;
    border-right: 20px solid transparent;
}

方法二：
.bubble {
    position: relative;
    width: 120px;
    height: 80px;
    background-color: #ddd;
    padding: 10px;
    border-radius: 5px;
}
.bubble:before {
    content: "";
    position: absolute;
    top: -15px;
    left: 50%;
    transform: translateX(-50%);
    border-top: 15px solid #ddd;
    border-left: 15px solid transparent;
    border-right: 15px solid transparent;
}
.bubble:after {
    content: "";
    position: absolute;
    bottom: -15px;
    left: 50%;
    transform: translateX(-50%);
    border-bottom: 15px solid #ddd;
    border-left: 15px solid transparent;
    border-right: 15px solid transparent;
} 

以上代码中，方法一使用伪元素:before和:after来实现，它们分别代表三角形的顶部和底部。其中，border属性来设置三角形的形状，width和height属性设置三角形的大小，position属性和transform属性用来调整三角形的位置。

方法二则是在已有框架基础上，只需要使用伪元素来实现小三角的效果。在设置气泡框的圆角为5像素的前提下，通过设置伪元素的border属性、宽高等属性来实现小三角的效果。

总之，使用 CSS 来制作三角形框是一种简单灵活的方式，有了这些技巧，我们的网页设计就可以更加个性化。