How to use div boxes to simulate line triangles

One 、 Analysis method ： Use boxes to simulate line triangles

Three boxes . One to limit the line position , The other two are divided into upper and lower structures , By means of rotation , Fine tuning top,left value , You can make line triangles .

Two 、 Add three boxes

       External box em, Inner box i,b.em The box class The value of the property is arrow.

Source code ：

 <ul>
                        <li>
                            <a href=""> Destination </a>
                        </li>
                        <li>
                            <a href=""> kits </a>
                        </li>
                        <li class="have-menu">
                            <a href=""> Community </a>
                            <em class="arrow">
                                <b></b>
                                <i></i>
                            </em>
                        </li>
                        <li>
                            <a href=""> Travel Assistant </a>
                        </li>
                        <li class="have-menu">
                            <a href=""> Shopping Mall </a>
                            <em class="arrow">
                                <b></b>
                                <i></i>
                            </em>
                        </li>
                        <li class="have-menu">
                            <a href=""> The hotel · Home stay </a>
                            <em class="arrow">
                                <b></b>
                                <i></i>
                            </em>
                        </li>
                        <li>
                            <a href=""> Special rate hotel </a>
                        </li>
                    </ul>

 

3、 ... and 、 Set the absolute positioning and other elements for the three boxes

By setting the relative positioning of the three box parent boxes , Set absolute positioning and different colors for the three boxes , Three boxes can be stacked . External box em At the bottom , Two i,b The box is on the same floor .

Source code ：

.site-head .topbar .shortcut-links>ul>li.have-menu{
    padding-right: 12px;
    position: relative;
}
.site-head .topbar .shortcut-links>ul>li.have-menu .arrow{
    height:12px;
    width:12px;
    position:absolute;
    top:50%;
    margin-top: -6px;
    background-color: orange;
}

.site-head .topbar .shortcut-links>ul>li.have-menu .arrow b{
    position: absolute;
    height:6px;
    width:6px;
    background-color:red;    
}
.site-head .topbar .shortcut-links>ul>li.have-menu .arrow i{
    position: absolute;
    height:6px;
    width:6px;  
    background-color:rebeccapurple;   
}

design sketch ：

Four 、 rotate , Change the background color , Micromodule box left and top value .

We will find that the inner two boxes are not in the middle of the outer box , It would be ugly , So first fine tune left,top It's worth keeping him at the parent level arrow Right in the middle of the box . This is still wrong , Because if you move the other box up , It forms purple or red rectangular lines .

therefore i,b The box needs to be rotated 45°, To reach the sharp corner of the square down . Delete the background color of the parent box , The sub boxes are body Background color and white , You can simulate a line triangle .

All of the code ：

.site-head .topbar .shortcut-links>ul>li.have-menu{
    padding-right: 12px;
    position: relative;
}
.site-head .topbar .shortcut-links>ul>li.have-menu .arrow{
    height:12px;
    width:12px;
    position:absolute;
    top:50%;
    margin-top: -6px;
}

.site-head .topbar .shortcut-links>ul>li.have-menu .arrow b{
    position: absolute;
    height:6px;
    width:6px;
    background-color:white;   
    left:3px;
    top:2.5px;
    transform: rotate(45deg);
}
.site-head .topbar .shortcut-links>ul>li.have-menu .arrow i{
    position: absolute;
    height:6px;
    width:6px;  
    background-color:#383D42;   
    top:1px;
    left:3px;
    transform: rotate(45deg);
}

design sketch ：

Of course , We can also join 3d Special effects , Let the line triangle rotate , Zoom, etc , Make the page more beautiful , More experience .