| 12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364 |
- /* thanks to https://codepen.io/nxworld/pen/oLdoWb */
- .sash-box {
- position: relative;
- max-width: 225px;
- /*width: 90%;
- height: 400px;
- background: #fff; */
- box-shadow: 0 0 15px rgba(0,0,0,.1);
- opacity: 0.85;
- z-index: 999;
- }
- /* common */
- .ribbon {
- width: 150px;
- height: 150px;
- overflow: hidden;
- position: absolute;
- }
- .ribbon::before,
- .ribbon::after {
- position: absolute;
- z-index: -1;
- content: '';
- display: block;
- border: 5px solid #2980b9;
- }
- .ribbon span {
- position: absolute;
- display: block;
- width: 225px;
- padding: 15px 0;
- background-color: #3498db;
- box-shadow: 0 5px 10px rgba(0,0,0,.1);
- color: #fff;
- font: 700 18px/1 'Lato', sans-serif;
- text-shadow: 0 1px 1px rgba(0,0,0,.2);
- text-transform: uppercase;
- text-align: center;
- }
- /* top left*/
- .ribbon-top-left {
- top: -10px;
- left: -10px;
- }
- .ribbon-top-left::before,
- .ribbon-top-left::after {
- border-top-color: transparent;
- border-left-color: transparent;
- }
- .ribbon-top-left::before {
- top: 10px;
- right: 10px;
- }
- .ribbon-top-left::after {
- bottom: 10px;
- left: 10px;
- }
- .ribbon-top-left span {
- right: -25px;
- top: 30px;
- transform: rotate(-45deg);
- }
|