How to show slanted text and images using CSS?

Author - Parminder Kaur

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:
0113
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

Webner Solutions is a Software Development company focused on developing Insurance Agency Management Systems, Learning Management Systems and Salesforce apps. Contact us at dev@webners.com for your Insurance, eLearning and Salesforce applications.

Leave a Reply

Your email address will not be published. Required fields are marked *