Creating a Diagonal Background Design using HTML and CSS Tutorial

The Father · 2025-02-27T03:07:09+0000

In this tutorial, you can learn to create a Simple Diagonal Background Design for a website or web application web pages using HTML and CSS. The tutorial aims to provide students and beginners with a reference for learning some tricks and techniques for designing or developing a website interface. Here, I will be providing a simple web page script that demonstrates the creation of a simple diagonal background design.

What is Diagonal Design?

The Diagonal Design is a simple user interface layout or background design of a website or web application with a slanting direction design. Frontend developers implement this design to a creative website UI and to give the end users a better experience while using the site.

How to Create a Diagonal Design using CSS?

Using CSS, there are a lot of ways and techniques to create diagonal shapes or elements. The skew() function of the transform property of CSS is one of the useful properties that can achieve the diagonal design. The skew CSS function skews or slants an element on the 2D plane. There are 3 skewing functions in CSS which are the skew(), skewX(), and skewY. Check out the scripts that I provided below to understand more about how can CSS create Diagonal Shaped Elements.

Sample Web Page

Here are the scripts of a simple web application page that demonstrate the creation of a simple website with a Diagonal background Design. The sample web page has a simple parallax with a diagonal design on the page header.

HTML

Here's the HTML file script of the web page that contains the sample static contents.

<!DOCTYPE html>
<html

lang

=

"en"

>
<head

>
<meta

charset

=

"UTF-8"

>
<meta

http-equiv

=

"X-UA-Compatible"

content

=

"IE=edge"

>
<meta

name

=

"viewport"

content

=

"width=device-width, initial-scale=1.0"

>
<title

>

CSS - Diagonal Background</

title

>
<link

rel

=

"preconnect"

href

=

"https://fonts.googleapis.com"

>
<link

rel

=

"preconnect"

href

=

"https://fonts.gstatic.com"

crossorigin>
<link

rel

=

"stylesheet"

href

=

"https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,[email protected],100..700,0..1,-50..200"

/

>
<link

rel

=

"stylesheet"

href

=

"style.css"

>
</

head

>
<body

>
<div

id

=

"wrapper"

>
<div

id

=

"page-header-container"

>
<div

class

=

"page-header-container-shadow"

></

div

>
<div

class

=

"header-content"

>
<div

class

=

"page-title"

>

Welcome to Sample Website</

div

>
<div

class

=

"site-logo"

>
<img

src

=

"./logo.jpg"

alt

=

"Site Logo"

>
</

div

>
</

div

>
</

div

>
<section

>
<h1

align

=

"center"

>

About Us</

h1

>
<p

>

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus cursus vehicula mauris eget convallis. Phasellus eros neque, interdum eget mollis a, vulputate ut metus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Maecenas malesuada facilisis facilisis. Duis in metus vel orci tincidunt consequat in vel augue. Sed posuere sit amet lectus sit amet porta. Pellentesque ullamcorper ornare sem et facilisis. Sed lobortis semper augue, at commodo est posuere nec.</

p

>
<p

>

Suspendisse at odio est. Aliquam vitae porta turpis. Maecenas sit amet metus rhoncus, posuere erat in, bibendum lacus. Suspendisse potenti. Duis auctor ligula nisl, nec venenatis purus sagittis mattis. Praesent feugiat ligula nunc, vel pulvinar ipsum elementum eu. Vivamus mollis sit amet orci id placerat. Donec ullamcorper elit in mattis condimentum.</

p

>
</

section

>
</

div

>
</

body

>
</

html

>

Default Stylesheet

Here's the default CSS for the design and layout of the web page. The script does not contain the script for displaying a diagonal design.

@import

url

(

'https://fonts.googleapis.com/css2?family=Rubik&display=swap'

)

;
@import

url

(

'https://fonts.googleapis.com/css2?family=Courgette&family=Secular+One&display=swap" rel="stylesheet'

)

;
:

root

{
--secular-font

:

'Secular One'

,

sans-serif

;
}
body *

{
font-family

:

'Rubik'

,

sans-serif

;
}
/**
Page Design
*/
body,
html{
height

:

100%

;
width

:

100%

;
margin

:

0

;
padding

:

0

;
}
body{
background-color

:

#fff

;
}
/* Page Header Design*/
#page-header-container

{
position

:

relative

;
height

:

300px

;
width

:

100%

;
overflow

:

unset;
}
#page-header-container

:

before

{
content

:

""

;
position

:

absolute

;
width

:

100%

;
height

:

100%

;
background-image

:

url

(

./bg-1

.jpg)

;
background-repeat

:

no-repeat

;
background-attachment

:

fixed

;
background-size

:

cover;
background-position

:

bottom

center

;
top

:

0

;
left

:

0

;
filter

:

brightness(

.8)
}
/** Header Content */
#page-header-container

.header-content

{
position

:

relative

;
height

:

85%

;
padding

:

3em

6em

;
z-index

:

3

;
}
.header-content

.page-title{
font-size

:

3rem

;
letter-spacing

:

3px

;
font-weight

:

500

;
text-align

:

center

;
color

:

#fff

;
font-family

:

var

(

--secular-font

)

;
}
/* Site Logo */
.site-logo

{
position

:

absolute

;
width

:

150px

;
height

:

170px

;
right

:

10%

;
top

:

36%

;
transform

:

skew

(

-16deg

,

11deg

)

;
}
.site-logo

>

img {
width

:

100%

;
height

:

100%

;
object-fit

:

cover;
object-position

:

center

center

;
}
section{
padding

:

1em

5em

;
}

The following Image is the result of the provided script above which has no diagonal design yet.

Creating a Diagonal Design

Here's the additional CSS design that creates the diagonal design.

/* Creating the Diagonal area*/
#page-header-container

:

after

{
content

:

""

;
position

:

absolute

;
width

:

100%

;
height

:

50px

;
background-color

:

#fff

;
bottom

:

-25px

;
left

:

0

;
transform

:

skewY(

-2deg

)

;
}
/* Creating the Diagonal shadow*/
#page-header-container

.page-header-container-shadow

{
position

:

absolute

;
bottom

:

-26px

;
height

:

44px

;
width

:

100%

;
background

:

#f5f5f5

;
transform

:

skewY(

-2deg

)

;
z-index

:

2

;
}

There you go! I have also provided the complete source code file that I created for this tutorial on this website and it is free to download. The download button is located below this tutorial's content.

That's it! I hope this Creating a Diagonal Background Design using HTML and CSS Tutorial will help you with what you are looking for and will be useful for your current and future projects.

Explore more on this website for more Tutorials and Free Source Codes.

Happy Coding =)

Download

You must upgrade your account or reply in the thread to view hidden text.

Creating a Diagonal Background Design using HTML and CSS Tutorial

More options

The Father

452,292

323,526

323,535