HTML-CSS: Zig zag background pattern

Last update on March 08 2024 13:35:24 (UTC/GMT +8 hours)

HTML-CSS : Exercise-30 with Solution

Using HTML, CSS creates a zig zag background pattern.

Use background-color to set a white background.
Use background-image with four linear-gradient() values to create the parts of a zig zag pattern.
Use background-size to specify the pattern's size. Use background-position to place the parts of the pattern in the correct locations.
Note: The fixed height and width of the element is for demonstration purposes only.

HTML Code:

<!--License: https://bit.ly/3GjrtVF--><!-- Comment: Indicates the license information for the code -->
<!DOCTYPE html><!-- Comment: Declares the document type and version of HTML -->
<html><!-- Comment: Indicates the start of the HTML document -->
<head><!-- Comment: Contains meta-information about the HTML document -->
<meta charset="utf-8"><!-- Comment: Declares the character encoding for the document -->
<meta name="viewport" content="width=device-width"><!-- Comment: Sets the viewport width to the width of the device -->
<title>Using HTML, CSS creates a zig zag background pattern</title><!-- Comment: Sets the title of the document -->
</head><!-- Comment: End of the head section -->
<body><!-- Comment: Contains the content of the HTML document -->
<div class="w3r-zig-zag"></div><!-- Comment: Defines a div for the zig-zag background pattern -->
</body><!-- Comment: End of the body section -->
</html><!-- Comment: End of the HTML document -->

Explanation:

This HTML code creates a simple webpage with a div element to represent a zig-zag background pattern.
The  comment indicates the license information for the code.
<!DOCTYPE html> declares the document type and version of HTML, which is HTML5.
<html> marks the start of the HTML document.
<head> contains meta-information about the HTML document, such as character encoding and viewport settings.
The <title> element sets the title of the webpage.
<body> contains the content of the HTML document.
The <div class="w3r-zig-zag"></div> creates a div with the class "w3r-zig-zag" for the zig-zag background pattern.

CSS Code:

<style> /* Comment: Begins the CSS styling for the HTML document */
.w3r-zig-zag { /* Comment: Styles the element for the zig-zag background pattern */
  width: 240px; /* Comment: Sets the width of the element */
  height: 240px; /* Comment: Sets the height of the element */
  background-color: #fff; /* Comment: Sets the background color of the element to white */
  background-image: linear-gradient(135deg, #000 25%, transparent 25%), /* Comment: Creates a diagonal gradient for the zig-zag pattern */
    linear-gradient(225deg, #000 25%, transparent 25%), /* Comment: Creates another diagonal gradient for the zig-zag pattern */
    linear-gradient(315deg, #000 25%, transparent 25%), /* Comment: Creates another diagonal gradient for the zig-zag pattern */
    linear-gradient(45deg, #000 25%, transparent 25%); /* Comment: Creates another diagonal gradient for the zig-zag pattern */
  background-position: -30px 0, -30px 0, 0 0, 0 0; /* Comment: Positions the background gradients */
  background-size: 60px 60px; /* Comment: Sets the size of each diamond in the zig-zag pattern */
  background-repeat: repeat; /* Comment: Specifies that the background pattern should repeat */
}
</style> /* Comment: End of the CSS styling */

Explanation:

.w3r-zig-zag styles the element to create a zig-zag background pattern.
width: 240px; sets the width of the element.
height: 240px; sets the height of the element.
background-color: #fff; sets the background color of the element to white.
background-image: linear-gradient(...); creates four linear gradients to simulate a zig-zag pattern.
background-position: -30px 0, -30px 0, 0 0, 0 0; positions the background gradients to create the zig-zag effect.
background-size: 60px 60px; sets the size of each diamond in the zig-zag pattern.
background-repeat: repeat; specifies that the background pattern should repeat.

HTML-CSS Editor:

See the Pen html-css-practical-exercises by w3resource (@w3resource) on CodePen.