【Web前端CSS-Triangle（CSS画三角）】

最新推荐文章于 2023-10-31 05:30:00 发布

sakura欣悠

最新推荐文章于 2023-10-31 05:30:00 发布

阅读量568

点赞数

分类专栏：黑马程序员前端学习文章标签： css 前端 css3

本文链接：https://blog.csdn.net/sakura22123/article/details/124862751

版权

黑马程序员前端学习专栏收录该内容

11 篇文章 15 订阅

订阅专栏

Web前端设计-CSS-Triangle（CSS画三角形）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        .triangle {
            /* width: 100px;
            height: 100px; */
            width: 0;
            height: 0;
            /* background-color: pink; */
            /* transparent: 透明 */
            border-top: 10px solid orange;
            border-right: 10px solid transparent;
            border-bottom: 10px solid transparent;
            border-left: 10px solid transparent;
        }

        /* 
            1. 书写一个盒子
            2. 盒子添加四个方向的border, 颜色设置不同
            3. 保留其中一个方向的border, 其他方向颜色是transparent
        */
    </style>
    <title>Document</title>
</head>
<body>
    <div class="triangle">

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

三角效果图

sakura欣悠

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
【Web前端CSS-Triangle（CSS画三角）】

Web前端设计-CSS-Triangle（CSS画三角形）<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale
复制链接

扫一扫

专栏目录