欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

前端 web css 三角形实例

程序员文章站 2022-06-15 13:09:39
...
<div class="triangle"></div>
.triangle {
    height: 0;
    width: 0;
    border: 50px solid #fff;
    border-bottom: 50px solid red;
}

效果图:

前端 web css 三角形实例


实际应用:(模仿 apple 购物袋)

前端 web css 三角形实例
前端 web css 三角形实例

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


启动 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);
}

前端 web css 三角形实例


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

个人网站 -> 点击访问

END