html+css实现三角形和矩形

-redux-

已于 2022-09-08 16:49:14 修改

阅读量744

点赞数

分类专栏： HTML 文章标签：前端 javascript html

于 2022-07-08 17:52:18 首次发布

本文链接：https://blog.youkuaiyun.com/qq_45883508/article/details/125682868

版权

HTML 专栏收录该内容

3 篇文章

订阅专栏

本文介绍了如何使用CSS来创建各种几何形状，如三角形、正方形和长方形。通过设置元素的宽高为0，利用透明边框和不同颜色的边框，可以巧妙地构造出这些形状。对于三角形，只需改变特定边的边框颜色；正方形则通过设置四个不同颜色的边框实现；长方形则通过隐藏某一边框来完成。这种方法基于CSS边框属性，为网页设计提供了创新的视觉效果。

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

一、三角形

1. 设置div的宽高为0

2. 添加边框并设为transparent（透明）

3. 设置某边的边框颜色即可实现上下左右三角形

<style>
    .box {
        width: 0;
        height: 0;
        border: 50px solid transparent;
        border-bottom: 50px solid rgb(8, 167, 216);
    }
</style>
<body>
    <div class="box"></div>
</body>

二、三角形 ➡ 正方形

1. 设置div的宽高为0

2. 设置边框为不同颜色

<style>
    .box {
        width: 0;
        height: 0;
        border-top: 50px solid rgb(239, 185, 50);
        border-bottom: 50px solid rgb(236, 72, 22);
        border-left: 50px solid rgb(200, 64, 159);
        border-right: 50px solid rgb(8, 167, 216);
    }
</style>
<body>
    <div class="box"></div>
</body>

三、三角形 ➡ 长方形

1. 设置div的宽高为0

2. 设置边框为不同颜色

3. 合理隐藏某一边框

<style>
    .box {
        width: 0;
        height: 0;
        border-top: none;
        border-bottom: 50px solid rgb(236, 72, 22);
        border-left: 50px solid rgb(200, 64, 159);
        border-right: 50px solid rgb(8, 167, 216);
    }
</style>
<body>
    <div class="box"></div>
</body>

思想：控制块元素的边框实现