css画三角形（面试题）

最新推荐文章于 2024-03-14 18:50:34 发布

花花叔叔

最新推荐文章于 2024-03-14 18:50:34 发布

阅读量561

点赞数

分类专栏： # 前端（旧）文章标签： css画三角形面试题

zbdx

本文链接：https://blog.csdn.net/qq_52077949/article/details/119854462

版权

前端（旧）专栏收录该内容

73 篇文章

订阅专栏

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style> 
        div {
            width: 0px;
            height: 0px;
            border-top: 100px solid transparent;
            border-right: 100px solid transparent;
            border-bottom: 100px solid blue;
            border-left: 100px solid transparent;
        }

    </style>
</head>
<body>
    <div>

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

过程：先绘制一个正方形，之后用四种不同的颜色绘制出四种不同颜色的边框，之后将正方形的宽高设置为0，将不想要的三个边框设置成透明颜色，就可以制作一个三角形了，这个是制作等腰直角三角形，制作锐角或者钝角时候，只需要将对应的宽度缩小或者扩大就可以了。
在这里插入图片描述

评论

被折叠的条评论为什么被折叠?

到【灌水乐园】发言

查看更多评论

添加红包

成就一亿技术人!

hope_wisdom

发出的红包

打赏作者

花花叔叔 你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20

扫码支付：¥1

获取中

扫码支付

您的余额不足，请更换扫码支付或充值

实付元

使用余额支付

点击重新获取

扫码支付

钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。