如何在两个div之间显示一条不直线[重复]

Question

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

我需要：

• “carret”位于第一个框的中间
• carret 下方和上方/旁边的背景颜色不同

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

我还是想知道是否还有其他方式存在？

Answer 1

简单的css使用方法pseudo

    .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