如何使用div盒子来模拟线条三角形

一、分析方法：使用盒子来模拟线条三角形

三个盒子。一个来限制线条位置，另外两个分为上下结构，通过旋转的方法，再微调top，left值，便可做出线条三角形。

二、加入三个盒子

       外部盒子em，内部盒子i，b。em盒子class属性的值为arrow。

源代码：

 <ul>
                        <li>
                            <a href="">目的地</a>
                        </li>
                        <li>
                            <a href="">锦囊</a>
                        </li>
                        <li class="have-menu">
                            <a href="">社区</a>
                            <em class="arrow">
                                <b></b>
                                <i></i>
                            </em>
                        </li>
                        <li>
                            <a href="">行程助手</a>
                        </li>
                        <li class="have-menu">
                            <a href="">商城</a>
                            <em class="arrow">
                                <b></b>
                                <i></i>
                            </em>
                        </li>
                        <li class="have-menu">
                            <a href="">酒店·民宿</a>
                            <em class="arrow">
                                <b></b>
                                <i></i>
                            </em>
                        </li>
                        <li>
                            <a href="">特价酒店</a>
                        </li>
                    </ul>

 

三、给三个盒子设置绝对定位及其他元素

通过给三个盒子父级盒子设置相对定位，再给三个盒子设置绝对定位和不同颜色，可以让三个盒子实现层叠关系。外部盒子em在最底层，两个i，b盒子在同一层。

源代码：

.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;   
}

效果图：

四、旋转，换掉背景颜色，微调子盒子left和top值。

我们会发现内部的两个盒子不在外部盒子正中间，这样会很难看很丑，所以先微调left，top值让他在父级arrow盒子正中间。这样还是不对，因为如果把另一个盒子往上移，形成的是紫色或红色长方形线条。

所以i，b盒子需要旋转45°，以达到正方形尖角向下。把父级盒子背景颜色删掉，子盒子分别为body背景色和白色，便可模拟出线条三角形。

所有代码：

.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);
}

效果图：

当然，我们也可以加入3d特效，让线条三角形旋转，缩放等，使页面更美观，更有体验感。