css画正三角形

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

啊哈前端

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

阅读量2.9k

点赞数 1

分类专栏： css3

css3 专栏收录该内容

29 篇文章

订阅专栏

本文介绍了一种使用CSS边框属性来绘制正三角形的方法。通过设置特定的边框宽度和颜色，可以轻松实现这一效果。这种方法适用于网页设计中需要简洁图标或装饰元素的场景。

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css画正三角形</title>
    <style type="text/css">
            .container {
                width: 0;
                height: 0;
                border-color: transparent transparent red transparent;  /*1、下边框有颜色 对应着上边框没有宽度,是正三角形；2、上边框有颜色 对应着下边框没宽度，是倒三角形*/
                border-style: solid;
                border-width: 0 300px 300px 300px;
            }
    </style>
</head>
<body>
    <div class="container">

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