esto es lo que quiero hacer

y aquí está mi CSS y una captura de pantalla de lo que hace:

.bread-list>.bread-item {
  background: #B7B7B7;
  font-size: 20px;
  color: #FFFFFF;
  padding: 20px;
  margin-top: 2px;
}

.bread-item::after {
  content: '';
  position: absolute;
  left: 42%;
  top: 100%;
  width: 0;
  height: 0;
  border-left: 20px solid transparent;
  border-right: 20px solid transparent;
  border-top: 20px solid #B7B7B7;
  clear: both;
}
<div class="bread-list">
  <div class="bread-item col-lg-12">
    Clients
    <div class="result-counter">
      182 Total
    </div>
    <div class="brand-name">
      Teva
    </div>
  </div>
  <div class="bread-item col-lg-12">
    Sections
    <div class="result-counter">
      4 Total
    </div>
    <div class="brand-name">
      Teva UK
    </div>
  </div>
  <div class="bread-item col-lg-12">
    Projects
    <div class="result-counter">
      4 Total
    </div>
    <div class="brand-name">
      Project 3
    </div>
  </div>
</div>

esto es lo que me muestra mi código real

Donde me equivoco exactamente? editar: he agregado html-side con todos los códigos relevantes. Me gustaría hacer esto de manera diferente también para el primer y último elemento.

0
Bilal Baraz 17 oct. 2017 a las 15:11

3 respuestas

La mejor respuesta

Probar esto

.bread-list>.bread-item {
      background: #B7B7B7;
      font-size: 20px;
      color: #FFFFFF;
      padding: 20px;
      margin-top: 2px;
      position: relative;
    }

    .bread-item::after {
      content: '';
      position: absolute;
      left: 50%;
      background: #B7B7B7;
      width: 20px;
      height: 20px;
      border: solid #FFFFFF;
      border-width: 0 2px 2px 0;
      display: inline-block;
      padding: 3px;
      transform: rotate(45deg);
      -webkit-transform: rotate(45deg);
      clear: both;
      bottom: -16px;
      z-index: 1;
    }
1
Mohamed Binothman 17 oct. 2017 a las 12:45

Prueba esto..

.bread-list>.bread-item {
    background: #B7B7B7;
    font-size: 20px;
    color: #FFFFFF;
    padding: 20px;
    margin-top: 2px;
    position: relative;
}

.bread-item::after {
    content: '';
    position: absolute;
    left: 42%;
    top: -9px;
    width: 15px;
    height: 15px;
    border-right: 2px solid;
    border-bottom: 2px solid;
    clear: both;
    transform: rotate(45deg);
    background: #B7B7B7;
}
.bread-item:first-child::after{
display:none;
}
<div class="bread-list">
  <div class="bread-item col-lg-12">
    Clients
    <div class="result-counter">
      182 Total
    </div>
    <div class="brand-name">
      Teva
    </div>
  </div>
  <div class="bread-item col-lg-12">
    Sections
    <div class="result-counter">
      4 Total
    </div>
    <div class="brand-name">
      Teva UK
    </div>
  </div>
  <div class="bread-item col-lg-12">
    Projects
    <div class="result-counter">
      4 Total
    </div>
    <div class="brand-name">
      Project 3
    </div>
  </div>
</div>
0
Hrishabh Singh 17 oct. 2017 a las 12:52

Intente agregar lo siguiente a .bread-list> .bread-item

position: relative;
-1
Mohamed Binothman 17 oct. 2017 a las 12:17