Do diagonal in CSS

Question

Do diagonal in CSS

Navigation

#1 by (4 votes)
#2 by (2 votes)

4

I am trying to recreate an image in CSS but I do not get the "diagonal" as shown in the image.

Until now I could only superpose the two colors creating 3 div's, the container, the blue and the golden.

I enclose my html and 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>

html css

asked by Member 11.05.2018 в 20:55

source

2 answers

2

To make diagonals you can use polygon of css that is used to give forms to html elements, also if you create a class and add as I did and also add bootstrap classes for example, it does not interfere much, in fact almost nothing.And it is not limited to diagonals you can make many geometric shapes by percentage.

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>

I leave you the LINK OF FORMS , on this page just look for the form, edit the way you want and also generates you below the css code automatically.

PS: It works in divs.

answered by 11.05.2018 в 21:28

When is it better to use LinkedList and when ArrayList.? How can I show the value of a variable on a screen within a text in c #? [duplicate]

score 4 · Accepted Answer

One option would be to use the pseudo-elements ::before and ::after to generate that effect. So what you would do would be to add a ::before / ::after square and transformed to have that shape (for example with rotate or skew ).

Something like this (I have removed the background color of blue and I have put it in its ::after so that there are no problems with the opacities):

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>