如何显示两个 div 之间的直线

Question

如何实现两个上框和底部文本之间的线？

我需要：

第一个盒子中间下方的“carret”
carret 下的背景颜色和 over/aside 不同

编辑：我实际上找到了一个简单的解决方案，使用 4 div 这样的：

我仍然想知道是否存在其他方法？

Answer 1

简单的使用方法csspseudo

    .divider{
      border-top: 1px solid #333;
      margin-top: 50px;
      position: relative;
    }
    
    .divider:after{
        background-color: #ffffff;
        bottom: 21px;
        content: '';
        display: block;
        height: 40px;
        left: 50%;
        margin-left: -20px;
        position: relative;
        -ms-transform: rotate(45deg);
        -webkit-transform: rotate( 
    45deg);
        transform: rotate( 
    45deg);
        width: 40px;
        z-index: 1;
        border-top: 1px solid #333;
        border-left: 1px solid #333;
    }

<div class="divider"></div>

Demo

如何显示两个 div 之间的直线

How to display an unstraight line between two div

html

javascript

css

responsive-design