Slanted text and Images in CSS for different browser is given by transform property in CSS. We need to specify the angle by which to slant the image or text. Angle can be negative or positive. Positive angle inclines the image in clockwise direction and negative angle inclined it in anti-clockwise.
For example :
<html> <body> <div> <p> This is the slanted image </p> <img id="minimg" src="minion.jpeg" alt="Minion" height="100px" width="100px"> <p> Below is the slanted text </p> <p id ="stext">To live is the rarest thing in the world. Most people exist, that is all. </p> </div> </body> </html> CSS minimg{ -ms-transform: rotate(17deg); /* IE 9 */ -webkit-transform: rotate(17deg); /* Chrome, Safari, Opera */ -moz-transform: rotate(17deg); /*Mozilla */ transform: rotate(17deg); border: 1px solid red; } #stext { -ms-transform: rotate(-10deg); /* IE 9 */ -webkit-transform: rotate(-10deg); /* Chrome, Safari, Opera */\ -moz-transform: rotate(-10deg); /*Mozilla */ transform: rotate(-10deg); } div {margin:100px;}
OutPut:
Webner Solutions is a Software Development company focused on developing CRM apps (Salesforce, Zoho), LMS Apps (Moodle/Totara), Websites and Mobile apps. If you need Web development or any other software development assistance please contact us at webdevelopment@webners.com