Image in Diagonal Section? - Support | Kriesi.at

Viewing 5 posts - 1 through 5 (of 5 total)

Author

Posts
March 2, 2017 at 9:46 pm #754623

quick-brown-fox
Participant

Hi,
I’m messing around with an idea that I wonder if it’s possible.

You can see from the attached link that I’ve sort of started it, but I want the top of the image to be included somehow.
Is this possible, I’ve tried making the colour transparent, I wondered if it was possible to make a diagonal top border or something.

As always, help appreciated.

Cheers!

March 6, 2017 at 2:47 pm #756426

quick-brown-fox
Participant

I guess you guys are busy fighting fires with the new update. No rush, whenever you have time I’d like to know if this is possible. Cheers.

March 7, 2017 at 3:41 pm #757044
Yigit
Keymaster
Hi,

Sorry for the late reply and thanks for your understanding :)
You can edit your color section element on top of your image and give it a unique ID – http://kriesi.at/documentation/enfold/wp-content/uploads/sites/2/2013/12/color-section-ID.png and then add following code to Quick CSS
```
#your-unique-id {
    -ms-transform: rotate(-2deg);
    -webkit-transform: rotate(-2deg);
    transform: rotate(-2deg);
    top: 24px;
    position: relative;
}
```
You might need to adjust the values :)

Best regards,
Yigit
March 7, 2017 at 5:48 pm #757152

quick-brown-fox
Participant

Thanks very much Yigit.
I’ve done that on the attached link, it just needs that to be a bit wider. You can see on the link that there’s a wedge of image showing through on the left side.
Any ideas?

Cheers
John

March 7, 2017 at 8:33 pm #757238
Yigit
Keymaster
Hi,

Please change your code to following one
```
.diag {
    -ms-transform: rotate(-5deg);
    -webkit-transform: rotate(-5deg);
    border-left: 45px solid #ffdd00;
    transform: rotate(-5deg);
    top: 80px;
    position: relative;
    width: 102%;
    left: -2%;
}
```
Best regards,
Yigit
Author

Posts

Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.