How to Design a CSS Ribbon

We also have the basic dimensions and the Background colour with CSS.

.card {background color: beige; height: 300px; margin: 40px; width: 500px;}

The middle part of the ribbon

We use one CSS variable (allows us to save and reuse a CSS value) called –p to save the padding valueThe value of the padding property uses the var (–p) syntax for the left and right fills of the ribbon so that it can be easily widenedThe variable –p will be later reused several timesThat makes our code flexible.

.ribbon {–p: 15px; background color: rgb (170,170,170); height: 60px; padding: 0 var (–p); width: 100%;}

In the screenshot below you can see what your demo should look like at this point:

Center the ribbon

We must too center the ribbonWe push it to the left through the fill size (marked by the variable –p) using relative positioning.

.ribbon {–p: 15px; background color: rgb (170,170,170); height: 60px; padding: 0 var (–p); position: relative; right: var (–p); width: 100%;}

The updated demo:

The sides of the ribbon

Now we make it left and right sides of the ribbon which should seemingly curve around the card edge. We use both the: before and: after pseudo-elements of .ribbon.

Both pseudo elements inherit the background color from .ribbon, and we use the filter: brightness (.5) line to make their color a bit darker. They are too absolutely positioned within their (relatively positioned) parent.

Their width must be the same as the fill size, and we post them on the left and right sides of the ribbon using the style rules left: 0 and right: 0.

.ribbon: before, .ribbon: after {background-color: inherit; content: ”; display: block; filter: brightness (.5); height: 100%; position: absolute; width: var (–p);}. ribbon: for {left: 0;}. ribbon: after {right: 0;}

Now the ribbon with the sides we just added looks like this:

Skew the sides

To make the sides of the ribbon look bent, we have to slides the sides 45 °The transformation: skewy () CSS rule skew elements vertically

.ribbon: before {left: 0; transform: skewy (45deg);}. ribbon: after {right: 0; transform: skewy (-45deg);}

As you can see from the edges of the sides do not align after the transformation, so we must pull them down

Align the sides

To determine the correct length with which we have to move the sides down, we go to trigonometry. What we need to find is xsince y is the width of the sides (equal to the padding dimension of .ribbon) and the angle θ is 45 ° (the angle of the skew).

The resulting x then should be halved, since there are also left and right sides.

If you are using a CSS preprocessor check if it has a tan function, or else refer to a tangent graph or calculator to find out the tangent value of the angleWe’re lucky, because tan 45 ° is 1, which means the value of x is equal to y in our case.

.ribbon: before, .ribbon: after {background-color: inherit; content: ”; display: block; filter: brightness (.5); height: 100%; position: absolute; top: calc (var (–p) / 2); width: var (–p);}

Since x had to be halved, we use the calc () CSS function to do the division of the –p variable.

Finally we have to align the sides along the z axis so let’s add the z-index: -1 line to the sides at place them behind the center section of the ribbon

.ribbon: before, .ribbon: after {background-color: inherit; content: ”; display: block; filter: brightness (.5); height: 100%; position: absolute; top: calc (var (–p) / 2); width: var (–p); z-index: -1;}

Now that we’ve aligned the sides, our CSS ribbon is ready.

Below you can watch the live demo again, keep in mind that some extra stylings are also used.

See Compsmag’s Pen CSS ribbon (@hkdc) on CodePen.

How to Design a CSS Ribbon: benefits

Faq

Final note

I hope you like the guide How to Design a CSS Ribbon. In case if you have any query regards this article you may ask us. Also, please share your love by sharing this article with your friends.

For our visitors: If you have any queries regards the How to Design a CSS Ribbon, then please ask us through the comment section below or directly contact us.
Education: This guide or tutorial is just for educational purposes.
Misinformation: If you want to correct any misinformation about the guide “How to Design a CSS Ribbon”, then kindly contact us.
Want to add an alternate method: If anyone wants to add more methods to the guide How to Design a CSS Ribbon, then kindly contact us.
Our Contact: Kindly use our contact page regards any help. You may also use our social and accounts by following us on Whatsapp, Facebook, and Twitter for your questions. We always love to help you. We answer your questions within 24-48 hours (Weekend off).
Channel: If you want the latest software updates and discussion about any software in your pocket, then here is our Telegram channel.