CSS3-案例-画三角形（面试题）

最新推荐文章于 2024-09-13 23:28:46 发布

Q _Q

最新推荐文章于 2024-09-13 23:28:46 发布

阅读量39

点赞数

分类专栏： CSS3 文章标签： css3 前端 css html

本文链接：https://blog.csdn.net/weixin_54021642/article/details/131345725

版权

CSS3 专栏收录该内容

42 篇文章 5 订阅

订阅专栏

该文章展示了一段HTML和CSS代码，通过调整边框颜色和透明度来创建一个由不同颜色边框组成的三角形。代码主要利用了CSS的边框技巧，通过设置透明边框和特定颜色边框来形成视觉上的三角形效果。

摘要由CSDN通过智能技术生成

代码：注释三边看一边就是一个三角形

<!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>
        *{
            margin: 0;
            padding: 0;
        }
        div{
            /* 固定部分 */
            width: 0;
            height: 0;
            font-size: 0;
            line-height: 0;

            /* 可变化部分 */
            /* 先全部边框设为透明 粗细可调 solid不变 */
            border: 50px solid transparent;
            /* 显示左边三角形 */
            border-left-color: brown;
            /* 显示上边三角形 */
            border-top-color: black;
            /* 右边 */
            border-right-color: blueviolet;
            /* 下边 */
            border-bottom-color: chocolate;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

效果图：