I'm learning to create landing pages from good examples online. One thing I'm trying to replicate is the light background behind the words "Build fast, responsive sites with Bootstrap" on the bootstrap page (the angled graphic).

It's not obvious to me in looking at the page source how this is done in this example. Can anyone suggest or point to a good resource that would help me learn this concept?

My site is built with Bootstrap 4 currently and hope to be able to stay within that framework.

CodePudding user response：

The background color can be easily solved by using ".bg-light" as the background color class. The easiest way to solve the shape is to draw a rectangle, rotate it to the designated degree then position it in such a way it fits perfectly woth what you want, here you can use ".absolute top-0 left-0 translate-middle" and such bootstrap classes. Read more on Bootstrap Positioning here As for the rotation, the easiest way to solve is with Bootstrap Extension. it provides bootstrap classes for rotating html elements. Read the docs on the link above

CodePudding user response：

What you are looking for is background: linear-gradient(...). Example background: linear-gradient(165deg, #f7f5fb 50%, #fff 50%); (It's what was used on the bootstrap site you referenced). You can learn more about it https://developer.mozilla.org/en-US/docs/Web/CSS/gradient/linear-gradient()