border制作三角形

最新推荐文章于 2021-08-24 11:46:18 发布

还不下马受降

最新推荐文章于 2021-08-24 11:46:18 发布

阅读量102

点赞数

分类专栏： css/html基础文章标签： css

本文链接：https://blog.csdn.net/weixin_43865846/article/details/109890048

版权

css/html基础专栏收录该内容

5 篇文章 0 订阅

订阅专栏

border显示正方形

定义一个盒子（div)，不定义宽高，只定义边框，那么内容部分为零，所看到的部分就是边框，一个大小为0，只有边框的盒子，通过设置边框的大小，改变盒子的占位大小。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .triangle{
            margin: auto;
            width: 0px;
            height: 0px;
            border: 2px;
            border-top:50px solid rgb(241, 238, 7);
            border-right: 50px solid red;
            border-bottom: 50px solid seagreen;
            border-left:50px solid  hsl(0, 87%, 27%);
        }
    </style>
</head>
<bod
    
    <div class="triangle">

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

看到的颜色部分是边框，中心的位置为内容部分为零
看到的颜色部分是边框，中心位置为内容部分为零。

三角形

如果将其中三面的颜色设置为透明，那么就可以得到一个三角形
把上面的代码三边的颜色改为transparent以后：
在这里插入图片描述
其余部分依然在，只不过是透明色的了

通过更改不同方向的边框值，可以得到不同的效果

还不下马受降

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
border制作三角形

border显示正方形定义一个盒子（div)，不定义宽高，只定义边框，那么内容部分为零，所看到的部分就是边框，一个大小为0，只有边框的盒子，通过设置边框的大小，改变盒子的占位大小。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> .triang
复制链接

扫一扫

专栏目录