html div CSS 实现倒三角

最新推荐文章于 2023-11-01 15:51:52 发布

原创最新推荐文章于 2023-11-01 15:51:52 发布 · 6.2k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#css #html

HTML 同时被 2 个专栏收录

19 篇文章

订阅专栏

css

1 篇文章

订阅专栏

<html>
    <head>
        <style>
            .boder {
               position:relative; 
               /*border:1px solid red;*/
                overflow:hidden;

            }
           span i {
              font-style:normal;  
              position:relative;
              top:-11px;  
              /*margin-top:-20px;*/
           
              /*border:1px solid red;*/
            }
            span {
                display:inline-block;
                 position:relative;
                 top:15px;
                  overflow:hidden;
                  /*border:1px solid black;*/
                  width:10px;

            }

            .bodercss i{
                        display:inline-block;
                    width: 0;
                    height: 0;
                    border-left: 5px solid transparent;
                    border-right: 5px solid transparent;
                    border-top: 10px solid red;
                    position:relative;
                    top:0px;
                       /*margin-top:-20px;*/
            }
        </style>    
    </head>

    <body>
        ddddd
        <!--特殊符号倒三角-->
        <div class="boder">test<span> <i>◆</i> </span></div>
        <!--边框倒三角-->
        <div class="bodercss">bordertest<i> </i></div>

    </body>
</html>

如有任何疑问加技术Qun 594271193 交流