<div class="top-b"></div>
<div class="logos">
<div class="logos-top">
<div class="logos-top-l"></div>
<div class="logos-top-r"></div>
</div>
<div class="logos-center">
<div class="logos-col">
<a href="#" class="logos-item">
<span class="logo-img"></span>
</a><!--logos-item-->
<a href="#" class="logos-item">
<span class="logo-img"></span>
</a><!--logos-item-->
</div><!--logos-col-->
<div class="logos-col">
<a href="#" class="logos-item">
<span class="logo-img"></span>
</a><!--logos-item-->
<a href="#" class="logos-item">
<span class="logo-img"></span>
</a><!--logos-item-->
</div><!--logos-col-->
<div class="logos-col">
<a href="#" class="logos-item">
<span class="logo-img"></span>
</a><!--logos-item-->
<a href="#" class="logos-item">
<span class="logo-img"></span>
</a><!--logos-item-->
</div><!--logos-col-->
</div><!--logos-center-->
<div class="logos-bot">
<div class="logos-bot-l"></div>
<div class="logos-bot-r"></div>
</div>
</div><!--logos-->
.top-b {
height: 100px;
background-color: #000;
width: 100%;
}
.logos {
margin-left: 140px;
margin-top: -50px;
width: 674px;
box-shadow: 0 15px 35px rgba(83, 111, 128, 0.1);
box-shadow: 0 15px 35px rgba(83, 111, 128, 0.1);
background-color: transparent;
position: relative; }
.logos a {
display: box;
display: flex;
display: flexbox;
display: flex;
height: 155px;
border-left: 1px solid #eaf1f5;
border-bottom: 1px solid #eaf1f5;
box-align: center;
align-items: center;
flex-align: center;
align-items: center;
box-pack: center;
justify-content: center;
flex-pack: center;
justify-content: center; }
.logos-col:first-child a {
border-left: none;
}
.logos-col {
width: calc(100% / 3);
width: calc(100% / 3); }
.logos-top, .logos-bot {
content: "";
display: inline-block;
position: absolute;
top: 0;
bottom: 0;
transition: 0.5s;
transition: 0.5s; }
.logos-top {
right: 100%;
border-right: 27px solid #fff;
border-bottom: 27px solid transparent;
border-left: 1px solid #eaf1f5}
.logos-bot {
left: 100%;
border-left: 27px solid #fff;
border-top: 27px solid transparent;
border-right: 1px solid #eaf1f5;}
.logos-center {
display: box;
display: flex;
display: flexbox;
display: flex;
position: relative;
background-color: #FFF; }
.logo-img {
width: 100px;
height: 100px;
background-color: #ccc;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.