Chevron


SUBMITTED BY: Guest

DATE: March 15, 2013, 4:38 a.m.

FORMAT: CSS

SIZE: 852 Bytes

HITS: 1514

  1. #chevron {
  2. position: relative;
  3. text-align: center;
  4. padding: 12px;
  5. margin-bottom: 6px;
  6. height: 60px;
  7. width: 200px;
  8. }
  9. #chevron:before {
  10. content: '';
  11. position: absolute;
  12. top: 0;
  13. left: 0;
  14. height: 100%;
  15. width: 51%;
  16. background: red;
  17. -webkit-transform: skew(0deg, 6deg);
  18. -moz-transform: skew(0deg, 6deg);
  19. -ms-transform: skew(0deg, 6deg);
  20. -o-transform: skew(0deg, 6deg);
  21. transform: skew(0deg, 6deg);
  22. }
  23. #chevron:after {
  24. content: '';
  25. position: absolute;
  26. top: 0;
  27. right: 0;
  28. height: 100%;
  29. width: 50%;
  30. background: red;
  31. -webkit-transform: skew(0deg, -6deg);
  32. -moz-transform: skew(0deg, -6deg);
  33. -ms-transform: skew(0deg, -6deg);
  34. -o-transform: skew(0deg, -6deg);
  35. transform: skew(0deg, -6deg);
  36. }

comments powered by Disqus