5

estoy intentando recrear una imagen en CSS pero no me sale la "diagonal" como se muestra en la imagen.

Encabezado con diagonales

Hasta ahora solo pude sobreponer los dos colores creando 3 div's, el contenedor, el azul y el dorado.

introducir la descripción de la imagen aquí

Les anexo mi html y css:

body{
    background: white;
    width: 95%;
    margin: auto;
}

.encabezado{
    position: relative;
    width: 100%;
}

.azul {
    background: rgba(0,125,204,.95);

    width: 80%;
    height: 40px;
    display: block;
    position: absolute;
    z-index: 2;

}

.dorado{
    background: rgb(212,176,18);
    width: 35%;
    right: 0px;
    height: 65px;
    display: block;
    position: absolute;
    z-index: 1;
}
<!DOCTYPE html>

<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Demo</title>
    <link rel="stylesheet" href="css/styles.css" type="text/css">
</head>
<body>
<div class="encabezado">
    <div class="azul"></div>
    <div class="dorado"></div>
</div>
</body>
</html>

3 respuestas 3

5

Una opción sería usando las pseudo-elementos ::before y ::after para generar ese efecto. Así lo que harías sería añadir un ::before/::after cuadrado y transformado para que tenga esa forma (por ejemplo con rotate o skew).

Algo como esto (he quitado el color de fondo de .azul y lo he puesto en su ::after para que no haya problemas con las opacidades):

body {
  background: white;
  width: 95%;
  margin: auto;
}

.encabezado {
  position: relative;
  width: 100%;
}

.azul {
  width: 80%;
  height: 40px;
  display: block;
  position: absolute;
  z-index: 2;
}

.azul::after {
  content: "";
  position: absolute;
  right: -20px;
  width: 120%;
  height: 40px;
  background: rgba(0, 125, 204, .95);
  transform: skew(40deg);
}

.dorado {
  background: rgb(212, 176, 18);
  width: 35%;
  right: 0px;
  height: 65px;
  display: block;
  position: absolute;
  z-index: 1;
}

.dorado::before {
  content: "";
  position: absolute;
  left: -32px;
  width: 65px;
  height: 65px;
  background: rgb(212, 176, 18);
  transform: skew(40deg);
}
<div class="encabezado">
  <div class="azul"></div>
  <div class="dorado"></div>
</div>

1
  • Optare por esta como la respuesta a mi solución, gracias por las respuestas.
    – Member
    Commented el 13 may. 2018 a las 4:36
3

Para hacer diagonales puedes usar polygon de css que sirve para dar formas a los elementos de html además si creas una clase y agregas como lo hice yo y además agregas clases de bootstrap por ejemplo, no interfiere mucho , de hecho casi nada.Y no se limita solo a diagonales puedes hacer muchas formas geométricas por porcentaje.

body{
    background: white;
    width: 95%;
    margin: auto;
}

.encabezado{
    position: relative;
    width: 100%;
}

.azul {
    background: rgba(0,125,204,.95);
    width: 80%;
    height: 50px;
    display: block;
    position: absolute;
    z-index: 2;
  
  -webkit-clip-path: polygon(0 0, 96% 0, 100% 100%, 0% 100%);
    clip-path: polygon(0 0, 96% 0, 100% 100%, 0% 100%);

}

.dorado{
    background: rgb(212,176,18);
    width: 35%;
    right: 0px;
    height: 65px;
    display: block;
    position: absolute;
    z-index: 1;
  
  -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 10% 100%);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 10% 100%);
}
<!DOCTYPE html>

<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Demo</title>
    <link rel="stylesheet" href="css/styles.css" type="text/css">
</head>
<body>
<div class="encabezado">
    <div class="azul"></div>
    <div class="dorado"></div>
</div>
</body>
</html>

Te dejo el LINK DE FORMAS, en esta página solo busca la forma , editas de la forma que quieres y además te genera abajo el código css automáticamente.

PD: Funciona en divs.

2
  • @AlvaroMontoro si lo haría pero no tenía tiempo , por eso le deje todo eso para que lo adaptara , cuando llegue a la casa editare esta respues, vale? Commented el 11 may. 2018 a las 21:42
  • @Member ahí cambie mi codigo para que se adapte al tuyo Commented el 12 may. 2018 a las 20:34
2

Tiene una manera súper fácil de hacer esto. Usted puede transformar su imagen en HTML / CSS. Después, convertir esto en SVG! O, si tiene las dimensiones y tamaños y el patrón de cada elemento crear clases con CSS referentes a esto a su HTML. O usted puede usar el propio 'Inspeccionar Elemento' para saber el tamaño de cada cosa y el color. Y así, volver a crear el elemento con estos datos, información. O, usted puede simplemente utilizar paper.js para hacer ese proceso para usted.

Información

0

Tu Respuesta

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

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