DEV Community

Discussion on: How to add curves to your website

Collapse
link2twenty profile image
Andrew Bone

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.

Collapse
dzhavat profile image
Dzhavat Ushev Author

Moving the ::before with bottom: 100% and ::after with top: 100% is quite smart! Way better than those hardcoded values. Thanks for your tips!

Collapse
dzhavat profile image
Dzhavat Ushev Author

Thanks again for your tips. I've updated the article to include your suggestions. :)