Discussion on: How to add curves to your website

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

[Dzhavat Ushev]

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

[Dzhavat Ushev]

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