怎样用html或css制作三角形

2025-02-26 01:42:07

推荐回答（4个）

回答1：

只设置border三个方向的值，另一个方向就会汇聚成一个点，就出现三角形了，希望对你有帮助，望采纳！

#triangle-left {
    width: 0;
    height: 0;
    border-top: 50px solid transparent;
    border-right: 100px solid red;
    border-bottom: 50px solid transparent;
}

下面是个示例：

回答2：

纯手打，不容易，望采纳；

回答3：

希望可以帮到楼主，下面是实现的代码：
#triangle-up {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid red;
}
HTML代码：

回答4：

.triangle_border_up{
    width:0;
    height:0;
    border-width:0 30px 30px;
    border-style:solid;
    border-color:transparent transparent #333;/*透明 透明  灰*/
    margin:40px auto;
    position:relative;
}
.triangle_border_up span{
    display:block;
    width:0;
    height:0;
    border-width:0 28px 28px;
    border-style:solid;
    border-color:transparent transparent #fc0;/*透明 透明  黄*/
    position:absolute;
    top:0px;
    left:0px;
}