Show DevBest CSS Ribbon Flags

[Markshall]

An old effect that seems to be crawling it's way back into websites lately is the ribbon-flag effect.

I saw a

You must be registered for see links

and liked the look of them, plus it gave me the opportunity to put clip-path to use as I've never used it before, so this is the result.

You must be registered for see links

SCSS:

.ribbon-flag {
  background-color: #c72c26;
  display: inline-block;
  padding: 30px 10px;
  clip-path: polygon(0% 100%, 0% 0%, 100% 0%, 100% 100%, 50% 90%);
  transition: padding-bottom .3s ease;
  cursor: pointer;
  user-select: none;
 
  &.yellow {background-color: #fcc70d;}
  &.blue {background-color: #406ab3;}
  &.green {background-color: #12a14a;}

  &:hover {
    padding-bottom: 35px;
  }
}

HTML usage:

<div class="ribbon-flag yellow">Hey</div>

Take and use them as you wish if you like.

Mark

 

[Menkz]

These would be amazing for a clan based website - nice mark!

 

[Markshall]

These would be amazing for a clan based website - nice mark!

Cheers man. I think the original Dribbble design was intended that way so it does make sense. They’ll make a great fit for something like that

 

[JMS]

These look really neat, sharp and clean for sure.
Good work on these