CSS--元素显示、三角

最新推荐文章于 2023-09-20 08:46:41 发布

七拾四

最新推荐文章于 2023-09-20 08:46:41 发布

阅读量235

点赞数

分类专栏：前端1 文章标签： css

本文链接：https://blog.csdn.net/weixin_44348052/article/details/122458216

版权

本文探讨了CSS中元素的显示方式，并详细讲解了如何利用CSS技巧创建三角形，涵盖了隐藏元素内容并生成不同方向的三角形的方法。

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

1 元素显示

        /* 显示和隐藏 display:none(隐藏)/block(显示/转化为块) 隐藏后不再占有位置*/
        
        .display {
            display: none;
            background-color: pink;
            height: 30px;
        }
        /* 可见性 visibility：visble(可视)/hidden(隐藏)/inherit(继承父级) 隐藏后仍占有原来位置*/
        
        .vis {
            visibility: hidden;
            background-color: purple;
            height: 40px;
        }
        /* 对溢出部分显示/隐藏 overflow:visible(默认)/auto(添加滚动条（无溢出不添加）)/hidden(隐藏)/scroll(总显示滚动条) */
        
        .div {
            background-color: green;
            height: 30px;
        }

2 三角

 /* 利用边框，当没有大小没有颜色的盒子拥有具有颜色的边框时会变成四份，只需要改变每部分边框的颜色就能得到对应的三角 */
        
        .son {
            position: absolute;
            left: 50px;
            top: 5px;
            width: 0;
            height: 0;
            border: 5px solid transparent;
            border-left-color: s