Badge Ribbon

SUBMITTED BY: Guest

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

FORMAT: CSS

SIZE: 854 Bytes

Raw Download

HITS: 1316

Report
  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. }
  11. #badge-ribbon:before,
  12. #badge-ribbon:after {
  13. content: '';
  14. position: absolute;
  15. border-bottom: 70px solid red;
  16. border-left: 40px solid transparent;
  17. border-right: 40px solid transparent;
  18. top: 70px;
  19. left: -10px;
  20. -webkit-transform: rotate(-140deg);
  21. -moz-transform: rotate(-140deg);
  22. -ms-transform: rotate(-140deg);
  23. -o-transform: rotate(-140deg);
  24. }
  26. #badge-ribbon:after {
  27. left: auto;
  28. right: -10px;
  29. -webkit-transform: rotate(140deg);
  30. -moz-transform: rotate(140deg);
  31. -ms-transform: rotate(140deg);
  32. -o-transform: rotate(140deg);
  33. }
comments powered by Disqus