Im trying to make an angled section that will have an image of the application im working on with some text about it, I ended up getting the proper sizes for a polygon and i have it flexing but since im using percentages, the angle likes to distort when being flexed (see images below)
No Flexing: enter image description here
With Flexing: enter image description here
Im not sure what would be the best way to handle this specific case while also having the page stay the same size as the display without affecting the angle. The code below is how I've been getting the polygon so far.
function Login() {
return (
<>
<div className="flex flex-col min-h-screen overflow-hidden relative">
<Navbar />
<div className="flex-grow flex">
<div className="flex-1 flex items-center justify-start bg-white z-10 ml-[5em]">
<Form />
</div>
<div
className="flex-1 bg-[#f7f7f7] pr-[5em]"
style={{
clipPath: `polygon(0 0, 100% 0, 100% 100%, 25% 100%)`,
}}
>
<div className="relative left-[10em] max-w-[675px] top-[8em] rotate-[-15deg] pr-[10em]">
<h1 className="text-[24px] font-semibold max-w-[300px] mb-4">This is a Title</h1>
<p className="flex font-light">Lorem ipsum dolor sit amet consectetur adipisicing elit. Excepturi adipisci officia enim quas laudantium illo! Ea, temporibus? Provident voluptatem in perspiciatis, a nemo fuga? Magni atque dicta assumenda alias deserunt?</p>
</div>
</div>
</div>
<DarkModeButton />
</div>
</>
);
}
I've tried to use a rectangle or different values for the clippath, and even tried to rotate the entire this but unfortunately there was some weird issue with it hiding the corners (not due to overflow-hidden). Any help is appreciated! :)
To have a consistent angle, you'd want to base the bottom left horizontal offset of the clip path on the height of the element. This can be done by:
[container-type:size].cqh unit in the clip-path() value, like 20cqh for 20% of the height.<script src="https://cdn.tailwindcss.com/3.4.16"></script>
<div id="app"></div>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<script type="text/babel" data-type="module">
import React from "https://esm.sh/react@19";
import client from "https://esm.sh/react-dom@19/client";
const Navbar = () => <div>Navbar</div>
const Form = () => <div>Form</div>
const DarkModeButton = () => <div>DarkModeButton</div>
function Login() {
return (
<>
<div className="flex flex-col min-h-screen overflow-hidden relative">
<Navbar />
<div className="flex-grow flex">
<div className="flex-1 flex items-center justify-start bg-white z-10 ml-[5em]">
<Form />
</div>
<div
className="flex-1 bg-[#f7f7f7] pr-[5em] [container-type:size]"
style={{
clipPath: `polygon(0 0, 100% 0, 100% 100%, 20cqh 100%)`,
}}
>
<div className="relative left-[10em] max-w-[675px] top-[8em] rotate-[-15deg] pr-[10em]">
<h1 className="text-[24px] font-semibold max-w-[300px] mb-4">
This is a Title
</h1>
<p className="flex font-light">
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Excepturi adipisci officia enim quas laudantium illo! Ea,
temporibus? Provident voluptatem in perspiciatis, a nemo fuga?
Magni atque dicta assumenda alias deserunt?
</p>
</div>
</div>
</div>
<DarkModeButton />
</div>
</>
);
}
const rootElement = document.getElementById("app");
client.createRoot(rootElement).render(<Login />);
</script>