estoy intentando recrear una imagen en CSS pero no me sale la "diagonal" como se muestra en la imagen.
Hasta ahora solo pude sobreponer los dos colores creando 3 div's, el contenedor, el azul y el dorado.
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>