Folded Corner Effect With CSS

Today, we look at achieving a CSS folded corner effect. This is a neat way to add a little extra style and appeal to sections of your site.

Introduction

The folded corner effect adds a nice little touch to your site, and can easily be done these days with just plain old CSS. Previously, we’d have to create PNG’s and apply them as background images or absolutely positioned elements. Nowadays, that’s just not good enough for maintainability and scalability. Luckily for us, the effect can be easily achieved with good old CSS. We don’t even need to add any markup to our HTML. Let’s first look at the HTML structure, which is beyond simple.

The HTML Structure

The markup is simple. For our case, we’re going to assume a simple content area wrapped in a section tag. The HTML looks like this:

Markup


<section>

  <h2>Folded Corner</h2>

  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi, sunt, quidem suscipit...</p>

</section>

Easy enough, right? But how can we achieve the effect with just one tag in the markup, and pure CSS? Let’s look below.

CSS Pseudo Classes To The Rescue

The CSS pseudo classes ::before and ::after are two of my favourite things about CSS. They allow us to add some visual style to our content without having to touch the markup at all and break any kind of semantic structure. Because we’re adding some style properties that affect only the visual aesthetic of our semantics, browsers that don’t support the pseudo classes (IE7 and down) will fallback gracefully. Let’s dig in to our CSS. But first, it’s very important to note that the CSS below isn’t prefixed, and you should prefix where necessary. Also, add the box-sizing: border-box property throughout the document.

Achieving The CSS Folded Corner Effect


The image above shows the effect in action. We have a rectangular section of content, and the top right corner looks like it’s folded over. To achieve this with CSS, we can think of that top right corner as two triangles:
  • One white one, pointing north-east
  • One dark blue one, pointing south-west
Convenient then, that we have two pseudo classes at our disposal. One of them will implement the white triangle, and one will implement the dark blue triangle. We’ll use some CSS triangle trickery inside our pseudo classes to achieve the effect. Here’s what the base CSS looks like:

CSS


section {

  position: relative;

  margin-bottom: 40px;

  padding: 40px;

  background-color: #96a5be;

}

section:last-child {

  margin-bottom: 0;

}

section:before, section:after {
  display: block;
  position: absolute;
  width: 40px;
  height: 40px;
  top: 0;
  right: 0;
  content: "";
}
section:before {
  border-top: solid 20px #fff;
  border-right: solid 20px #fff;
  border-left: solid 20px transparent;
  border-bottom: solid 20px transparent;
}
section:after {
  border-bottom: solid 20px #5b7093;
  border-left: solid 20px #5b7093;
  border-right: solid 20px transparent;
  border-top: solid 20px transparent;
}

This will also serve as the basis for our next two styles. In other words, the next two styles will just be extensions of what we’ve seen above.

Adding A Border Radius

Adding a border radius is easy. We just need to be aware of which pseudo element we have to target, and which corner of our triangle we need it applied to. We’ll add a .border-radius class to our section for targeting purposes, so the HTML looks like this:

Markup

<section class="border-radius">
  <h2>Folded Corner</h2>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi, sunt, quidem suscipit...</p>
</section>

Now, our CSS like this:

CSS


.border-radius {
  border-radius: 10px;
}
.border-radius:after {
  border-radius: 0 0 0 10px;
}


Adding A Shadow

Adding a shadow is also fairly simple, and give a more realistic impression that the corner is folding over. We’ll add the box-shadow class to our markup for targeting, so the HTMl looks like this:

Markup

<section class="shadow">
  <h2>Folded Corner</h2>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi, sunt, quidem suscipit...</p>
</section>

In our CSS, we want to hide the shadow if it’s outside the bounds of the folded corner area. This is done simply with the overflow property. Also, we need to make sure we’re targeting the correct pseudo class. Our CSS looks like this:

CSS


.shadow {
  overflow: hidden;
}
.shadow:after {
  box-shadow: -1px 1px 5px #212835;
}

Wrap Up

And that’s a wrap. Simple but effective CSS techniques to add a little variety to our content areas. This can be applied to buttons, links, content areas, inputs, CSS icons, etc, to add a little extra style to your appearance without the use of imagery. The beauty lies in the fact that it’s very easily modifiable. I hope you enjoyed this tutorial, and if you have any questions, comments, or feedback, leave it below. Thanks for stopping by.


Location: Bengaluru, Karnataka, India

Comments

Post a Comment

Popular posts from this blog

Gradient Border Colors with CSS

Image
CSS3 has all the new features. With these features, we are now able to build image-less websites. Earlier,  We were using image when it comes to showing gradient colors. Now, it becomes much leaner with the use of CSS3 Gradient Background. But CSS3 Gradient does not stop only for background use. Did you know that you can also utilize it within borders? Let's see how to do this. First Method The first method is by applying CSS3 Gradient within pseudo-elements. Well, let’s see how the trick works. Top To Bottom Gradient Border We will start off with a simple gradient that spreads from top to bottom. To get started, create a box with a div, as follows. HTML <div class="box"></div> CSS .box {       width: 400px;       height: 400px;       background: #eee;   } To form the gradient in the box borders, set a solid border on the top and bottom side of the box first. And also create 2 rectangles with 2 pseudo-elements — :before and :a
Read more

10 Useful Libraries and Resources for Responsive Web Design

Image
Let’s talk about responsive web design. People are increasingly dependent on their smart mobile devices, and chances are that a large portion of the visitors of your website have used their phone or tablet to get to it. In this article you will find 10 articles, tools and resources, which will help you learn what responsiveness is, and how to apply these techniques to your current website. Happy learning! Basics Let’s start with these articles which explain the basic ideas of responsiveness. 1. Make it Responsive Google’s “Make it Responsive” is a great introduction in the topic. It will get you into the responsive web-designs. During this course, you will be building a site that works across multiple screen sizes and device types. They also have other useful guides which we recommend.                                                     Make it Responsive 2. MDN’s Responsive Web design Tutorial This is a nice MDN article about some of the basic strategies people use t
Read more

The Simplest Way To Center Elements Vertically And Horizontally

Flexbox is a relatively new addition to the CSS world and we keep finding more and more excellent applications for it. We can even solve the age-old problem with centering an element both vertically and horizontally with CSS. It is easier than you can imagine – it is only three lines of code, doesn’t require you to specify the size of the centered element and is responsive-friendly! This technique works in all modern browsers – IE10+, Chrome, Firefox and Safari (with the -webkit- prefix). See the full compatibility table here . The HTML The idea, of course, revolves around flexbox. First, we create a container in which we want everything to be centered: <div class="container"> <h3> All content in here will be centered. </h3> </div> You can place this container div anywhere you want. In the live example above we’ve made it take up the whole width and height of the page. The CSS As we said earlier, we will be u
Read more