用css写一个三角形

最新推荐文章于 2025-06-21 09:15:59 发布

原创最新推荐文章于 2025-06-21 09:15:59 发布 · 501 阅读

1 ·

CC 4.0 BY-SA版权

css 专栏收录该内容

4 篇文章

订阅专栏

今天闲着没事，想写个三角形看看
用到的border 和 trasparent(透明)

<body>
<div></div>
</body>

css代码

div{
float:left;
background-color: #00ced1;
border-top: 100px solid  #fafad2;
border-left: 100px solid #cd5c5c;
border-right: 100px solid #00bfff;
border-bottom: 100px solid #ffa07a;
}

出现的效果是这样的

我们可以看到当所有的边都设置之后，有四个方向的等腰三角形

我们只需要一个方向的就够了，把把其他边设置透明就行

div{
float:left;
border-top: 100px solid  transparent;
border-left: 100px solid #cd5c5c;
border-right: 100px solid  transparent;
border-bottom: 100px solid  transparent;}

产生的效果如下：