前端 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);
}

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

个人网站 -> 点击访问 。