css描绘一个三角形

礼小七

于 2022-01-04 16:19:24 发布

阅读量158

点赞数

文章标签： html css3

本文链接：https://blog.youkuaiyun.com/lixiaoqidecsdn/article/details/122305582

版权

本文介绍了一种利用CSS实现特殊形状的方法，特别是如何通过设置宽高为0及特定边框颜色来创建一个带有颜色边框的三角形。示例代码展示了如何通过透明边框和红色底边创建一个直角三角形。这种技巧在网页设计中常用于箭头、提示框等元素的制作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

思路：

1.新增一个盒子

2.样式：宽高为0，三条边（border）为透明（transparent）;

一条边是有颜色的带宽度的.

拓展：其他如直角三角形，隐藏边即可，

<style>
    div {
        width: 0;
        height: 0;
        border-left: 200px solid transparent;
        border-right: 200px solid transparent;
        border-bottom: 400px solid red;
    }
</style>

<body>
    <div></div>

</body>

效果：