Full Width Responsive CSS Triangle Using `clip-path`

Full Width Responsive CSS Triangle Using `clip-path`

I like triangles.

To be honest, who doesn't?

But what I like even more is using CSS to create a triangle that is full width, scales properly, but doesn't take up 90% of the screen.

The other day I was looking for a solution to this, and I couldn't find exactly what I was looking for.

So, in this article, we're going to be creating a CSS triangle!

p.s Here's the demo: https://jarodpeachey.github.io/simple-css-triangle/

Use Case

What our triangle is going to be used for is separating HTML sections so we can differentiate content on our site.

Our goal is to have each new content section have a different background than the one before. At the top of each section, we'll use our CSS triangle to add some geometry to our separation.

In the end, it should look something like this:

enter image description here

HTML Markup For The Triangle

To style our triangle with CSS, we first need HTML.

Hopefully, you knew that.

Inside of our index.html file, we're going to add our markup.

<!DOCTYPE  html>
<html  lang="en">
  <head>
    <meta  charset="UTF-8">
    <meta  name="viewport"  content="width=device-width, initial-scale=1.0">
    <title>CSS Triangle</title>
    <link  rel="stylesheet"  href="style.css">
  </head>
  <body>
    <section id="hero">
      <div class="center">
        <h1>Super-Awesome Triangle</h1>
        <h3>Built with CSS!</h3>
        <button>Learn More</button>
      </div>
    </section>
    <section id="section-one">
      <div class="triangle"></div>
      <div class="center">
      <h1 class="title">About Me</h1>
      <p class="about">
        I'm a triangle. Well, I'm words describing a triangle. The triangle is up there ⬆
      </p>
      <p>
        That triangle is cool, right? It's fully responsive, not too tall, not too short, and it's WHITE! (the most amazing part, for sure).
      </p>
    </div>
  </section>
  <section id="section-two">
    <div class="center">
      <h1 class="title">More Stuff</h1>
      <p class="about">
I know you like more stuff. Especially more words. Words are great.
      </p>
    </div>
  </section>
</body>
</html>

In the <head> of our HTML file, we're linking to our stylesheet, which we'll look at shortly.

<link rel="stylesheet" href="style.css">

The rest of the HTML is separated into three sections: the hero section, section one and section two.

I've added default content inside each section, but you can leave those sections blank if you need to. Or, put your own content!

Styling the App

In order for the triangle to work, we need to add some basic padding and margin to the sections, as well as some background colors to differentiate between them.

Add this in your CSS file:

body,
html {
  box-sizing: border-box;
  font-family: 'Montserrat', 'Segoe UI', Tahoma, Geneva, Verdana, sans-  serif;
  margin: 0;
  padding: 0;
  color: rgb(46, 54, 50);
  font-size: 18px;
}
  
#hero {
  background: linear-gradient(
    to bottom  right,
    rgb(19, 190, 76),
    rgb(11, 177, 199)
  );
  padding-bottom: 64px;
}
  
.center {
  width: 90%;
  margin: 0  auto;
  max-width: 769px;
  padding: 64px  0;
  text-align: center;
}
  
#hero  h1 {
  margin: 0;
  color: white;
  font-size: 64px;
}
  
#hero  h3 {
  font-size: 36px;
  color: #ffffffcc;
}
  
button {
  border: 1px  solid  white;
  background: white;
  border-radius: 50px;
  padding: 12px  16px;
  font-weight: 700;
  color: rgb(19, 190, 124);
  cursor: pointer;
}

.triangle {
  position: absolute;
  display: block;
  height: 100px;
  width: 100%;
  content: '';
  background: white;
  top: -50px;
  clip-path: polygon(0  36%, 50%  0, 100%  36%, 100%  100%, 0  100%);
}
  
#section-two {
  background: #f7f7f7;
}

Most of this is just styling, but the important parts are explained soon.

Creating the Triangle

Soon is here. Now we're explaining the important stuff.

To create the triangle, we need to add a few simple styles to the .triangle class.

Open your style.css file and style the triangle.

.triangle {
  position: absolute;
  top: -50px;
  height: 100px;
  width: 100%;
  content: '';
  background: white;
  clip-path: polygon(0  36%, 50%  0, 100%  36%, 100%  100%, 0  100%);
}

Basically, we're setting the triangle to be the full width of it's parent element and be positioned -50px from the top (half the height of the triangle).

position: absolute;
top: -50px;
height: 100px;
width: 100%;

We also set the background color to be white, because that's the color of the section.

Now, the final CSS rule is where the square becomes a triangle. We're adding a basic clip-path to the triangle, which makes it look, well, like a triangle.

clip-path: polygon(0  36%, 50%  0, 100%  36%, 100%  100%, 0  100%);

After doing this, you should have something that looks like this:

enter image description here

Kinda... not good. There's not even a triangle.

This is because the triangle's position is set to absolute. This makes the triangle positioned according to the first parent element it finds that is NOT positioned statically.

Since our sections are positioned statically, the triangle ignores them.

To fix this, we need to set the section's position to be relative.

#section-one,
#section-two {
  position: relative;
}

Now, your site should look WAY better.

Note the fact that there's actually a triangle now 🙌🎉

Conclusion

So, I hope you've learned something new in this post! Like, maybe how to create a cool triangle section separator in CSS.

Thanks for reading! If you liked this article, you can check me out on Twitter, or on my website!

p.s For those of you wondering, the official reading time for this article is 4 minutes and 54 seconds 😉⏳

Written by

Jarod Peachey

Jarod Peachey is a front end developer and JAMstack enthusiast. He's the founder of The Five Minute Developer, and https://staticbox.io. It would make him happy if you followed him on Twitter. And maybe check out his website.