Cascading style sheet

Create Diagonal Stripes in CSS

We generally encounter striped design in most websites, magazines and flyers. But a diagonal stripe in CSS? How is that even possible?

Yes, it is possible and we are not using a bitmap image or an SVG. We would just rely on CSS’s linear gradient and background-size property.

So let’s begin.

<body style="background: repeating-linear-gradient(45deg,
green 0, green 25%, #58a 0, #58a 50%);
background-size: 42.426406871px 42.426406871px;">
<p>Your text here </p>
</body>

Let’s understand how this worked out.

To understand how we were able to create the diagonal stripe, we need to remember the Pythagorean theorem we learned at school about calculating the lengths of the sides of right triangles.

The theorem states that the hypotenuse (the longest, diagonal side of the triangle) is equal to a2 + b2 where a and b are the lengths of its legs. On a 45° right triangle, both its legs are of the same length, so the formula becomes 2a2 = a 2.

In our diagonal stripes, the background size specifies the length of the hypotenuse, but the stripe width is actually the length of the leg.

This means that to get our original stripe width of 15px, we need to specify a background size of 2 × 15 2 ≈ 42 . 426406871 pixels, which we can safely round off to 42px.

Recent Posts

Check if Number, Word or Phrase is a Palindrome in JavaScript

What is a Palindrome? A palindrome is any word, phrase, number, or sequence that reads…

6 days ago

How Facial Recognition Software Works

Facial recognition technology is rapidly changing how we interact with devices, access services, and enhance…

1 week ago

Why Grok 4 is the AI Game-Changer You Need to Know

Move over ChatGPT, there's a new, significantly upgraded player causing a stir. xAI, Elon Musk's…

2 weeks ago

Cloudinary vs. AWS vs. ImageKit.io vs. Cloudflare

Choosing the right asset management service is vital. Cloudinary is frequently mentioned, but how does…

4 weeks ago

How to Integrate Cloudinary with PHP

Cloudinary is a powerful cloud-based media management platform that allows you to upload, store, manage,…

4 weeks ago

Trump Extends U.S. TikTok Sale Deadline to September 2025

In a surprising turn of events, former President Donald Trump announced on June 19, 2025,…

1 month ago