前端 web css 三角形实例

<div class="triangle"></div>

.triangle {
    
    
    height: 0;
    width: 0;
    border: 50px solid #fff;
    border-bottom: 50px solid red;
}

效果图：

---

实际应用：（模仿 apple 购物袋）

但是有圆角。。。所以放弃上述方案

---

启动 PLAN B

将 白色 矩形 加一点圆角 旋转45度 就可以了；

.small-b-menu-triangle {
    
    
    position: absolute;
    right: 17.5px;
    top: -4.5px;
    border-radius: 1px;
    height: 10px;
    width: 10px;
    background-color: #fff;
    transform: rotate(45deg);
}

---

喜欢或对你有帮助，请点个赞吧 。

个人网站 -> 点击访问 。