sash-ribbon.css 1.1 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364
  1. /* thanks to https://codepen.io/nxworld/pen/oLdoWb */
  2. .sash-box {
  3. position: relative;
  4. max-width: 225px;
  5. /*width: 90%;
  6. height: 400px;
  7. background: #fff; */
  8. box-shadow: 0 0 15px rgba(0,0,0,.1);
  9. opacity: 0.85;
  10. z-index: 999;
  11. }
  12. /* common */
  13. .ribbon {
  14. width: 150px;
  15. height: 150px;
  16. overflow: hidden;
  17. position: absolute;
  18. }
  19. .ribbon::before,
  20. .ribbon::after {
  21. position: absolute;
  22. z-index: -1;
  23. content: '';
  24. display: block;
  25. border: 5px solid #2980b9;
  26. }
  27. .ribbon span {
  28. position: absolute;
  29. display: block;
  30. width: 225px;
  31. padding: 15px 0;
  32. background-color: #3498db;
  33. box-shadow: 0 5px 10px rgba(0,0,0,.1);
  34. color: #fff;
  35. font: 700 18px/1 'Lato', sans-serif;
  36. text-shadow: 0 1px 1px rgba(0,0,0,.2);
  37. text-transform: uppercase;
  38. text-align: center;
  39. }
  40. /* top left*/
  41. .ribbon-top-left {
  42. top: -10px;
  43. left: -10px;
  44. }
  45. .ribbon-top-left::before,
  46. .ribbon-top-left::after {
  47. border-top-color: transparent;
  48. border-left-color: transparent;
  49. }
  50. .ribbon-top-left::before {
  51. top: 10px;
  52. right: 10px;
  53. }
  54. .ribbon-top-left::after {
  55. bottom: 10px;
  56. left: 10px;
  57. }
  58. .ribbon-top-left span {
  59. right: -25px;
  60. top: 30px;
  61. transform: rotate(-45deg);
  62. }