Show DevBest CSS Ribbon Flags

Markshall

Русский Стандарт
Contributor
Dec 18, 2010
2,637
2,389
An old effect that seems to be crawling it's way back into websites lately is the ribbon-flag effect.

I saw a 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.

uuZMw4CNo4D3.png




SCSS:
PHP:
.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:
PHP:
<div class="ribbon-flag yellow">Hey</div>

Take and use them as you wish if you like.

Mark
 

Markshall

Русский Стандарт
Contributor
Dec 18, 2010
2,637
2,389
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
 

Users who are viewing this thread

Top