像这样的设计

Question

design_2

design_2

我们如何设计如图1和2所示的图形，是否可以使用before和after标签。如果是，那么如何。？

HTML

     <div class="row">
        <div class="col-md-3 section_3_services active">
            IT infrastructure
        </div>
        <div class="col-md-3 section_3_services">
            Web Development
        </div>
        <div class="col-md-3 section_3_services">
            App Development
        </div>
        <div class="col-md-3 section_3_services">
            QA Consultancy
        </div>
    </div>
    <div class="row">
        <div class="col-md-3 section_3_empty e_3_active">

        </div>
        <div class="col-md-3 section_3_empty">

        </div>
        <div class="col-md-3 section_3_empty">

        </div>
        <div class="col-md-3 section_3_empty">

        </div>
    </div>

CSS

.e_3_active{
    height: 30px;
    background: #4C4EFE;
    -webkit-clip-path: polygon(52% 0, 42% 0, 48% 100%);
    clip-path: polygon(52% 0, 42% 0, 48% 100%);
}

但是我认为这不是最佳方法，而且我无法使用此方法来设计图像2。

Answer 1

因此，要获得想要的东西需要很多工作，但是可以做到！

Answer 2

通常是我做这种事情的方式：https://jsfiddle.net/sa0xo7de/23/