Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!DOCTYPE html>
- <head>
- <style>
- .container {
- position: absolute;
- width: 100vw;
- height: 100vh;
- top: 0;
- left: 0;
- clip-path: polygon(25% 0,100% 0,100% 100%,75% 100%);
- }
- .container:before {
- content: "";
- position: absolute;
- display: block;
- width: 100%;
- height: 100%;
- top: 0;
- left: 0;
- transition: opacity .3s ease-in-out;
- opacity: 0.1;
- background: linear-gradient(51.34deg,#dfd8c9 50%,#f2efe9 67%) 0 0;
- border: 1px solid #f00;
- }
- .container:hover {
- left: 1%;
- }
- .container:hover:before {
- opacity: 1;
- }
- .content {
- position: absolute;
- right: 50px;
- top: 50%;
- }
- </style>
- </head>
- <body>
- <div class="container">
- <div class="content">
- Lorem Ipsum Dolor Amet
- </div>
- </div>
- </body>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement