2

Estoy creando un portafolio y quiero colocar 2 secciones juntas separadas con un borde diagonal sin margenes, ambos divs tienen texto y colores distintos, estuve buscando en internet, pero no en encuentro lo que busco, he intentado varias cosas pero ya llevo un buen rato no lo consigo, estoy intentando de esta forma:

.info-card {
  position: relative;
  display: inline-block;
  width: 50%;
  height: 100%;
  box-sizing: border-box;
  padding: 15px;
  font-size: 2em;
  font-family: sans-serif;
}

.info-card::after {
  content: "";
  position: absolute;
  top: 0;
  height: 100%;
  width: 50%;
  transform: skewX(-20deg);
  z-index: 2;
}

#info {
  background: #cc6600;
  width: 50%;
  float: left;
}

#info::after {
  background: #cc6600;
  transform-origin: bottom right;
  right: 0;
}

#history {
  background: #0066cc;
  float: right;
}

#history::after {
  background-color: #0066cc;
  bottom: top left;
  left: 0;
}
<div id="info" class="info-card">
  <h1>Título 1</h1>
  <p>
    Lorem ipsum dolor sit amet consectetur adipisicing elit.
  </p>
</div>
<div id="history" class="info-card">
  <h1>Título 2</h1>
  <p>
    Lorem, ipsum dolor sit amet consectetur adipisicing elit
  </p>
</div>

Pero los bordes están encima del texto ¿Cómo lo hago?

3
  • Agrega a tu css h1,p{position: relative;z-index: 200;} el 2 oct. 2021 a las 2:31
  • @JaimeMenéndez gracias, pero el texto pasa los bordes el 2 oct. 2021 a las 13:40
  • Ponle un padding left si es el de la derecha o padding right si es el de la izquierda. Una alternativa hubiera sido usar clip-path, pero no tiene gran soporte. el 2 oct. 2021 a las 14:35

1 respuesta 1

0

Podrías aplicar esta posible solución aunque seguirías teniendo problemas en pantallas muy pequeñas.

Si has conseguido el resultado que buscabas de otra forma me gustaría conocerla.

.container{
  overflow:hidden;
  max-height:500px
}
.info-card {
  position: relative;
  display: inline-block;
  width: 50%;
  height: 100%;
  box-sizing: border-box;
  font-size: 2em;
  font-family: sans-serif;
}

.info-card::after {
  content: "";
  position: absolute;
  top: 0;
  height: 100%;
  width: 100%;
  transform: skewX(-20deg);
  z-index: 2;
}

#info {
  background: #cc6600;
  width: 50%;
  background: #cc6600;
  float: left;
}

#info::after {
  background: #cc6600;
  transform-origin: bottom right;
  right: 0;
}

#history {
  background: #0066cc;
}

#history::after {
  background-color: #0066cc;
  bottom: top left;
  left: 0;
}

#info h1,
#info p{
    z-index: 3;
    position: relative;
    padding-left: 10vw;
    padding-right: 15vw;
}
#history h1,
#history p{
    z-index: 4;
    position: relative;
    padding-left: 10vw;
    padding-right: 15vw;
}
<div class="container">
  <div id="info" class="info-card">
  <h1>Título 1</h1>
  <p>
    Lorem ipsum dolor sit amet consectetur adipisicing elit.
  </p>
</div>
<div id="history" class="info-card">
  <h1>Título 2</h1>
  <p>
    Lorem, ipsum dolor sit amet consectetur adipisicing elit
  </p>
</div>
</div>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.