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?
h1,p{position: relative;z-index: 200;}