CSS corner fold effect - move from right to left?

Hello all,

I am currently working with the following code from oreilly - CSS Secrets, Visual Effects…

<!DOCTYPE html>
<html>
<head>
	<title>curve</title>

	<style>
	
/*** Folded corner effect — at an angle */

div {
	position: relative;
	width: 12em;
	background: #58a; /* Fallback */
	background: linear-gradient(-150deg, transparent 1.5em, #58a 0);
	padding: 2em;
	color: white;
	font: 100%/1.6 Baskerville, Palatino, serif;
	border-radius: .5em;
}

div::before {
	content: '';
	position: absolute;
	top: 0; right: 0;
	width: 1.73em; height: 3em;
	background: linear-gradient(to left bottom, transparent 50%, rgba(0,0,0,.2) 0, rgba(0,0,0,.4)) 100% 0 no-repeat;
	transform: translateY(-1.3em) rotate(-30deg);
	transform-origin: bottom right;
	border-bottom-left-radius: .5em;
	box-shadow: -.2em .2em .3em -.1em rgba(0,0,0,.15)
}
</style>
	
</head>
<body>
<div>“The only way to get rid of a temptation is to yield to it.”
— Oscar Wilde, The Picture of Dorian Gray</div>
</body>
</html>

This renders the following result -

Screenshot 2022-12-30 at 10.15.22

However, I would like to move/duplicate this page fold effect to the left hand side instead.

I can easily shift the corner cutout of the card to the left side by changing div > background: linear-gradient to 150deg but I am having serious difficulty moving and aligning the remainder of the transparent fold effect, particulary the transforms and shadows.

Can anyone point me in the right direction?

Thanks for any assistance. :slight_smile:

you have to play with it.
The strategy I would use is to try to reverse the numbers one by one or zero them so you can identify what each one is doing. Then you can decide if you like the effect or not.

Here’s my solution
https://codepen.io/hbar1st/pen/vYaGzgP?editors=1000

Hello,

Sorry for the late reply.

You are right of course, I need to play around and experiment a little with the CSS.

However, your post (and example) gave me much clearer insight into exactly what CSS to adjust.

Thank you so much, I really appreciate your help. :slight_smile:

L

1 Like

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.