纯css实现菱形◇变三角的小技巧

最新推荐文章于 2023-03-25 16:16:51 发布

diligentkong

最新推荐文章于 2023-03-25 16:16:51 发布

阅读量2.3k

点赞数 1

分类专栏： css实例技巧存档文章标签： css

本文链接：https://blog.csdn.net/diligentkong/article/details/54693062

版权

css实例技巧存档专栏收录该内容

1 篇文章 0 订阅

订阅专栏

利用css将◇变成三角箭头效果，实现京东头部类似效果
上代码：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            *{
                margin: 0;
                padding: 0;
            }
            .fl{
                float: left;
                margin:100px;
                height: 30px;
                line-height: 30px;
                background-color: gold;
            }
            i,s{
                text-decoration: none;
            }
            .dt{
                padding: 0 20px;
                position: relative;
            }
            .dt i{
                font: 400 15px/15px "宋体";
                position: absolute;
                top: 13px;
                right: 3px;
                width: 15px;
                height: 7px;
                overflow: hidden;

            }
            .dt s{
                position: absolute;
                top: -8px;
                left: 0;
            }
        </style>
    </head>
    <body>
        <div class="fl">
            <div class="dt">
                城市：杭州
                <i><s>◇</s></i>
            </div>
        </div>

    </body>
</html>