We're a place where coders share, stay up-to-date and grow their careers.
This is a really nice effect, there are a couple of things I'd have done a little differently but with the same result 🙂
For your positioning, it might be better to use 100%.
.container::before, .container::after { background: url("path/to/curve.svg") center bottom no-repeat; content: ''; height: 103px; position: absolute; width: 100%; } .container::before { bottom: 100%; } .container::after { top: 100%; transform: scaleY(-1); }
This has the same result but without the need for any hardcoded numbers.
Also, and this is just my personal style/preference, I'd replace transform: scaleY(-1); with transform: rotateX(180deg); for readability.
transform: scaleY(-1);
transform: rotateX(180deg);
Thanks again for your tips. I've updated the article to include your suggestions. :)
Moving the ::before with bottom: 100% and ::after with top: 100% is quite smart! Way better than those hardcoded values. Thanks for your tips!
::before
bottom: 100%
::after
top: 100%
This is a really nice effect, there are a couple of things I'd have done a little differently but with the same result 🙂
For your positioning, it might be better to use 100%.
This has the same result but without the need for any hardcoded numbers.
Also, and this is just my personal style/preference, I'd replace
transform: scaleY(-1);
withtransform: rotateX(180deg);
for readability.Thanks again for your tips. I've updated the article to include your suggestions. :)
Moving the
::before
withbottom: 100%
and::after
withtop: 100%
is quite smart! Way better than those hardcoded values. Thanks for your tips!