纯CSS箭头

最新推荐文章于 2025-05-15 14:36:35 发布

墨墨博客

最新推荐文章于 2025-05-15 14:36:35 发布

阅读量402

点赞数

CC 4.0 BY-SA版权

分类专栏： css3 文章标签： css 箭头

本文链接：https://blog.youkuaiyun.com/wangweiscsdn/article/details/78030438

css3 专栏收录该内容

40 篇文章

订阅专栏

先看效果图：

代码如下：

<html>
        
<head>
    <title></title>
    <style>
    .arbox {
           position: relative;
        top: -1rem;
        display: inline-block;
        margin-left: 2rem;
        float: left;
        margin-top: 1rem;
        }
        .box{
            float: left;
            width: 3rem;
          height: 3rem;
          border: 1px solid #000;
          border-radius: 50%;
            line-height: 43px;
            margin-right: 10px;
            background-color: #02c8a7;
            text-align: center;
            color: #fff;
            position: relative;
        float: left;
        display: inline-block;
        margin-left: 1.5rem;
        top: 1rem;
        left: 2rem;
         margin-top: -2rem;
        }

    .arr {
       width: 0;
          height: 0;
          overflow: hidden;
          border-width: 0.7rem;
          border-style: dashed dashed dashed solid;
          border-color: transparent transparent transparent #000;
          position: absolute;
          left: 2.1rem;
    }

    .block {
       background-color: #000;
          height: 0.5rem;
          left: 3px;
          overflow: hidden;
          position: absolute;
          top: 0.45rem;
          width: 2rem;
    }
    .container{
    	margin-top: 2rem;
    }
</style>
    </head>
    <body>
    <div class="container">
    	<div class="box">导航</div>
    <div class="arbox">
        <div class="arr"></div>
        <div class="block"></div>
    </div>
    <div class="box">导航1</div>
    </div>
    
    </body>
    </html>