Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- /**
- * CSS Ribbon
- */
- #box {
- position: relative;
- width: 300px;
- height: 75px;
- }
- #box:hover {
- width: 500px;
- transition: all 1s;
- }
- #front {
- position: absolute;
- background: red;
- height: 100%;
- width: 100%;
- z-index: 2;
- color: white;
- font-family: arial;
- font-weight: bold;
- font-size: 30px;
- text-align: center;
- line-height: 75px;
- }
- #back {
- height: 100%;
- width: 75px;
- background: yellow;
- position: absolute;
- z-index: 1;
- right: -50px;
- top: 25px;
- }
- #back #cut {
- height: 0px;
- width: 0px;
- position: absolute;
- z-index: 3;
- border: 38px solid white;
- border-color: transparent white transparent transparent;
- }
- #edge {
- width: 0px;
- height: 0px;
- position: absolute;
- border-color: blue transparent transparent transparent;
- border-style: solid;
- border-width: 25px;
- border-left-width: 0px;
- z-index: 3;
- top: 100%;
- right: 0px;
- }
Add Comment
Please, Sign In to add comment