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 -
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.