@mattstuddert
Posted
Hey Lucas, great work on this solution! The way that you've done the background pattern is fine. Another way, which would reduce the HTML would be to use a pseudo-element, like ::before to do the same. For the border-radius you can also set a really high pixel value, instead of a percentage to make sure the corners are fully rounded e.g. border-bottom-left-radius: 500px;.
I hope that helps!
@gomezlucas
Posted
@mattstuddert Perfect! I got it now! and it definitely would save some space in the HMTL and make it clearer. Thank you very much!
@mattstuddert
Posted
@gomezlucas you're welcome!
@gomezlucas
Posted
@mattstuddert hello Matt! thanks for your answer! what do you mean by reduce the html with ::before? Like setting the figure size with that pseudo element? thanks!
@mattstuddert
Posted
@gomezlucas no worries! If you used the pseudo-element then you wouldn't need the <div class="header-figure"></div> in your HTML. You would instead do something like this is your CSS:
.header-container {
position: relative;
/* other styles */
}
.header-container::before {
content: "";
position: absolute;
/* other styles */
}
Here's the MDN article on the before pseudo-element for more information.
Let me know if you have any more questions 👍
