Docs

[antoniolucio]

Thank you lely I did put the class imagecontainer on the column then the put the html on the raw content, and also the image but no luck. It’s also tell telling me this problem. Thanks for the help

[Paul R]

Hi,

I went ahead and added the image element then added the class to your column element.

Please adjust your css to achieve your desired look.

eg. On this code you can change the left and top value

.imagecontainer img{
 transform: rotate(-45deg);
 -ms-transform: rotate(-45deg); /* IE 9 */
 -webkit-transform: rotate(-45deg); /* Safari and Chrome */
 position:absolute;
 top:-100px;
 left:-100px;
}

Then on this, change the height and width

.imagecontainer{
 margin:50px auto;
 display:block;
 width:200px;
 height:200px;
 overflow:hidden;
 border-radius: 28px;
 transform: rotate(45deg);
 -ms-transform: rotate(45deg); /* IE 9 */
 -webkit-transform: rotate(45deg); /* Safari and Chrome */
 position:relative;
 
 /* non-essential styling */
 -webkit-box-shadow: 0px 0px 3px 3px rgba(0, 0, 0, .05);
 box-shadow: 0px 0px 3px 3px rgba(0, 0, 0, .05);
 
}

Hope that helps.

[antoniolucio]

Hi paul thanks for the help I did follow on the info you gave me and adjusted all numbers in the css to make it look the way I want it but it just not adjusting to how I wanted to look like.The images shows after many tries to adjust the css, when I look at different sizes of interface they all don’t follow thru in staying in order but all look different. The image I try different numbers to adjust it and it still has blank space out side the image, the look I’m going after is provided, also I want to have text under it on a angle. Thank you a million

[Rue Nel]

Hello There,

Thanks for updating in and for providing the screenshots. What you have in mind cannot be done with the current setup. Please use a more advance, responsive and have better control by using CSS Masking. To do that, please check this tutorial:

Clipping and Masking in CSS

https://www.html5rocks.com/en/tutorials/masking/adobe/

Hope this helps.

[Author]

Posts