HTML FORMS /
Forms
/
Slanting Div with Text
<!DOCTYPE html> <html> <head> <style type="text/css"> div { position: relative; display: inline-block; overflow: hidden; color: #fff; float: right; width: 50%; text-align: left; padding: 10px 10px 10px 50px; } div:after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #008080; transform-origin: 100% 0; ); transform: skew( -135deg ); z-index: -1; } </style> </head> <body> <div> Slanted Div with Text </div> </body> </html>
