Badge Ribbon


SUBMITTED BY: Guest

DATE: March 12, 2013, 11:49 a.m.

FORMAT: CSS

SIZE: 854 Bytes

HITS: 1324

  1. #badge-ribbon {
  2. position: relative;
  3. background: red;
  4. height: 100px;
  5. width: 100px;
  6. -moz-border-radius: 50px;
  7. -webkit-border-radius: 50px;
  8. border-radius: 50px;
  9. }
  10. #badge-ribbon:before,
  11. #badge-ribbon:after {
  12. content: '';
  13. position: absolute;
  14. border-bottom: 70px solid red;
  15. border-left: 40px solid transparent;
  16. border-right: 40px solid transparent;
  17. top: 70px;
  18. left: -10px;
  19. -webkit-transform: rotate(-140deg);
  20. -moz-transform: rotate(-140deg);
  21. -ms-transform: rotate(-140deg);
  22. -o-transform: rotate(-140deg);
  23. }
  24. #badge-ribbon:after {
  25. left: auto;
  26. right: -10px;
  27. -webkit-transform: rotate(140deg);
  28. -moz-transform: rotate(140deg);
  29. -ms-transform: rotate(140deg);
  30. -o-transform: rotate(140deg);
  31. }

comments powered by Disqus