css三角形

最新推荐文章于 2022-06-27 10:13:53 发布

前端爱好者。

最新推荐文章于 2022-06-27 10:13:53 发布

阅读量69

点赞数

分类专栏：前端

原文链接：https://www.mk2048.com/blog/blog.php?id=2baj0i0j&title=css%E4%B8%89%E8%A7%92%E5%BD%A2

版权

前端专栏收录该内容

483 篇文章 4 订阅

订阅专栏

css代码

.triangle-right{
    height:0;
    width:0;
    border-top: 40px solid transparent;
    border-bottom: 40px solid transparent;
    border-left: 30px solid #000;
}
.triangle-left{
    height:0;
    width:0;
    border-top: 40px solid transparent;
    border-bottom: 40px solid transparent;
    border-right: 30px solid #000;
}
.triangle-bottom{
    height:0;
    width:0;
    border-right: 40px solid transparent;
    border-left: 40px solid transparent;
    border-top: 30px solid #000;
}
.triangle-top{
    height:0;
    width:0;
    border-right: 40px solid transparent;
    border-left: 40px solid transparent;
    border-bottom: 30px solid #000;
}

html代码

<div class="triangle-right"></div><!--左-->
<div class="triangle-left"></div><!--右-->
<div class="triangle-top"></div><!--下-->
<div class="triangle-bottom"></div><!--上-->