CSS Rotated (diagonal) div, sections, navbar and footer, use svg or just transform skew, what to use?

Question

I'm starting as a front-end web developer. Currently, I'm having trouble when trying to implement a layout for a customer website.

The designer is asking for a layout like this.

As you can see, the layout is not rectangular, the navbar and also the footer, and a lot of the website sections are diagonal.

I googled a lot and I found 2 methods of achieving that.

The first method is by creating some SVG and adding those as background in CSS for everything that is rotated. This causes a problem when the screen is resized. If the viewport of the user is very wide, the rotating effect is lost a bit because the SVG is stretched.

The second method I found is by applying a transform skew for every section and content inside to avoid rotated text. That is a lot of work because I have to apply the rotation practically in every element of the website. However, it wins flexibility against the first method because with media query I can fix the rotation if the effect is getting lost.

Did anyone face this problem before? I'm approaching correctly the problem? What method would you use? Does anyone know about other methods to solve this problem?

UPDATE

After having seen some of your help I started to code applying the answers. Thank you to @A Haworth, @G-Cyrillus, @Nathan

I have not found a way to make the right part of the image hidden by the bar. Maybe I could tint the last option of the linear-gradient as the background color. Does anyone have a better solution?

Here is the code.




    
    title

    
    
    



    
    


    
    SECTION NAME


    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi aspernatur culpa, delectus dolorum et harum impedit, iure maiores molestias nemo possimus quae sunt tempora tenetur ullam unde vitae. Ex, maiores.
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi aspernatur culpa, delectus dolorum et harum impedit, iure maiores molestias nemo possimus quae sunt tempora tenetur ullam unde vitae. Ex, maiores.
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi aspernatur culpa, delectus dolorum et harum impedit, iure maiores molestias nemo possimus quae sunt tempora tenetur ullam unde vitae. Ex, maiores.

Here is the screenshot of the error.

user_10867454 · Answer

I'd sugest laying everything out in the conventional way, ie rectangles, and then when a sloping boundary is needed apply it as a pseudo element. That way you don't have to 'correct' anything in the normal text/images. And if you make the pseudo elements absolute they don't affect the natural flow of everything else. So for the beige looking polygon at the top you draw that as a rectangle with text in in the usual way and give it a pseudo element that draws an extra skewed bit on the bottom. And have it overlap the next div.

Something like:

.a {
  width:300px;
  height: 150px;
  background-color: beige;
}
.a::after {
  content: '';
  width: 100%;
  height: 250px;
  display: inline-block;
  transform: skewY(-20deg);
  background-image: linear-gradient(to bottom, beige, beige);
}

text stuff

For the actually rotated text you will have to rotate the div it is in - not skew.

user_2442099 · Answer

here is an idea mixing gradient and rotate and a few margins:

html {
  font-size: clamp(12px, 2.5vw, 20px);/* abiut responsive idea */
}
body {
  margin: auto;
  color: white;
  text-shadow: 0 0 1px black;
}
.bod {/* let's use a container to avoid growing too wide */
  max-width: 1200px;
  margin: auto;
  box-shadow: 0 0 1px gray, 0 0 0 50vw #dea45780;
}
nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  position: relative;
  overflow: hidden;
}
/* let's use a pseudo gradient a few times */
nav:after,
.content:after,
section:before {
  content: "";
  height: calc(40px + 1vw);/* responsive idea */
  width: 140%;
  margin: 0 -20%;
  display: block;
  background: linear-gradient(
    to bottom right,
    white 45%,
    #dfa557 46%,
    #dfa557 55%,
    transparent 56%
  );
}
h1,
h2,
p,
h3 {
  padding: 1rem;
  margin: 0.5rem;
}
nav svg {
  max-height: 100px;
  margin-right: 3vw;
}
.content {
  overflow: hidden;
  margin-top: calc((40px + 1vw) * -1);/* hide it partially */
  display: grid;
  grid-auto-rows: auto;/* to dispatch element over the image instead absolute positionning */
}
.content img {
  max-width: 100%;
  min-height: 400px;
  margin-bottom: 0.75em;
  object-fit: cover;/* clip it if needed */
  grid-column: 1;
  grid-row: 1/6;
}
.content h1 {
  grid-column: 1;
  grid-row: 2;
}
.content h2 {
  grid-column: 1;
  grid-row: 3;
}
.content h1,
.content h2 {
  background: linear-gradient(
    to top,
    transparent 1.25rem,
    #dfa557 1.25rem,
    #dfa557 2.25rem,
    transparent 2.25rem
  );
  font-size: 3rem;
  text-transform: uppercase;
  width: max-content;
}
.content h3 {
  grid-column: 1;
  grid-row: 5 / 6;
  margin: auto;
  transform: rotate(-3deg);/* rotate it a bit to match gradient rotation */
  background: #73392c;
  z-index: 1;
}
.content:after {
  grid-column: 1;
  grid-row: 5;
  transform: scale(-1);
}
section {
  mix-blend-mode: color-burn;/* blend with previous tag to  not hide */
  position: relative;
  z-index: 1;
  overflow: hidden;
  background: #8f250c;
}
section:before {
  transform: scale(-1, 1);
}

 


    
    

 
  
  Slogum
  Slogum
    SECTION NAME
  
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi aspernatur culpa, delectus dolorum et harum impedit, iure maiores molestias nemo possimus quae sunt tempora tenetur ullam unde vitae. Ex, maiores.
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi aspernatur culpa, delectus dolorum et harum impedit, iure maiores molestias nemo possimus quae sunt tempora tenetur ullam unde vitae. Ex, maiores.
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi aspernatur culpa, delectus dolorum et harum impedit, iure maiores molestias nemo possimus quae sunt tempora tenetur ullam unde vitae. Ex, maiores.

/* there is a few comments inside the css part to tell purpose of some rules */

user_5790269 · Answer

You could set the header and footer elements to contain a position:relative; and then use a position:absolute; psuedo ::before / ::after elements to create a skewed element that sits behind the content with it's respective top / bottom position depending on whether this is the header or footer.

header {
position:relative;
  &::after { 
    position:absolute; bottom:0; left:0; z-index:-1; width:100%; height:100%; background:white; border-bottom:.3125em solid orange; -webkit-transform: skewY(3deg); -moz-transform: skewY(3deg); -ms-transform: skewY(3deg); -o-transform: skewY(3deg); transform: skewY(3deg); content:'';
  }
}

user_14409952 · Answer

I solved this with clip-path: polygon(...) propertie of css.

it's like drawing points to make your own figure and is very responsive. this should look like what you are looking for clip-path: polygon(0 0, 100% 0%, 100% 60%, 0% 100%); it has to be inside some div or container

example here

docs here

CSS Rotated (diagonal) div, sections, navbar and footer, use svg or just transform skew, what to use?

UPDATE

4 Answers