css一个正方形下面接一个三角形（css一个正方形下面接一个三角形怎么接）

CSS可以实现许多有趣的元素组合，如下面所示的正方形下面接一个三角形。

.square-triangle {
    width: 0;
    height: 0;
    border-top: 50px solid red;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    position: relative;
    top: -50px;
}
.square {
    width: 100px;
    height: 100px;
    background-color: red;
}
    

第一段代码实现三角形，并通过设置top属性将其放在正方形上方。其中，border-top为50px，表示三角形的高度，border-left和border-right为50px，表示三角形底边长度的一半，以实现等边三角形的效果。

接下来，我们通过另外一段代码实现正方形。这段代码定义了正方形的宽度、高度和背景色。

将两段代码结合起来，我们就可以实现正方形下面接一个三角形了。此外，我们还可以通过调整边框宽度和颜色以及背景色等方式，来实现更丰富的组合效果。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！