css制作导航栏的三角形

最新推荐文章于 2023-02-09 14:28:45 发布

过客尘烟

最新推荐文章于 2023-02-09 14:28:45 发布

阅读量758

点赞数

分类专栏： html+css 文章标签： css

本文链接：https://blog.csdn.net/qq_41309350/article/details/114377004

版权

html+css 专栏收录该内容

17 篇文章 0 订阅

订阅专栏

在做网页的时候我们通常看到这样的需求（做一个三角）
在这里插入图片描述
首先

    .box{
    width: 0;
    height: 0;
    border: 50px solid ;
    border-color: #000 #FF0000 #FFFF00 #00FFFF;
}
    </style>

</head>
<body >
 
    <div class="box"></div>
    
</body>

在这里插入图片描述
你需要那个就将其他三个隐藏掉就行

    .box{
    width: 0;
    height: 0;
    border: 50px solid ;
    border-color: #000 transparent transparent transparent;
}
    </style>

</head>
<body >
 
    <div class="box"></div>

在这里插入图片描述
还有这种需求

这种三角箭头在网页中很常见

利用 & gt; & lt;制作然后根据情况旋转
直接上图标（直接到lconfont-阿里巴巴矢量图标库下载）

        .b{
        
            font-weight: bold;
            position: absolute;
            transform: rotate(90deg);
        }

    </style>

</head>
<body > 
    <div class="b">&gt;</div>
</body>

在这里插入图片描述

过客尘烟

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
1
评论
css制作导航栏的三角形

在做网页的时候我们通常看到这样的需求（做一个三角）首先 .box{ width: 0; height: 0; border: 50px solid ; border-color: #000 #FF0000 #FFFF00 #00FFFF;} </style></head><body > <div class="box"></div> </body>你
复制链接

扫一扫

专栏目录