利用border属性，制作三角

最新推荐文章于 2022-09-08 22:03:28 发布

麸or莘

最新推荐文章于 2022-09-08 22:03:28 发布

阅读量213

点赞数 1

分类专栏： Python设计基础文章标签： CSS 边框形状创建三角形透明边框

本文链接：https://blog.csdn.net/Y_I_M_I_l_u_c_k/article/details/118614949

版权

Python设计基础专栏收录该内容

3 篇文章 0 订阅

订阅专栏

1. 首先，如果在代码只设置边框，而不设置宽高的情况下，代码会呈现以下情况。

代码如下：

    <style>       
         div {
                width: 0;
                height: 0;
                border-left: 5px solid red;
                border-right: 5px solid blue;
                border-top: 5px solid blueviolet;
                border-bottom: 5px solid chartreuse;
            }
    </style>
</head>

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

结果如下：

2. 如果去除下边框设置，则会产生以下效果。

3. 依据第二步我们可以发现，如果能将左右边框想办法隐藏或者去除，我们便能得到一个向下的三角。

若将左右边框去除，测试发现，则整个显示的区域都会消失。

若将左右边框设为透明。代码如下：

        div {
            width: 0px;
            border-left: 5px solid transparent;
            border-right: 5px solid transparent;
            border-top: 5px solid blueviolet;
            /* border-bottom: 5px solid chartreuse; */
        }

则我们便得到一下图案：

总结：如果想制作三角。把盒子宽高设置为0，只设置边框，然后想要的三角相对的边框不设置，相邻的两个边框颜色设置为透明色即可。还可以根据调整两侧边框的高度或自身三角的宽来控制三角形的最终形状。

麸or莘

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
利用border属性，制作三角

1. 首先，如果在代码只设置边框，而不设置宽高的情况下，代码会呈现以下情况。代码如下： <style> div { width: 0; height: 0; border-left: 5px solid red; border-right: 5px solid blue; border-to
复制链接

扫一扫

专栏目录