Is there a way to position a triangle in the bottom right corner of a parent div without it extending beyond the boundaries? I attempted to use tailwind css for this, but the sides of the triangle are crossing over the parent div. Any suggestions on how to prevent this overflow?
https://i.sstatic.net/5oZwDIHO.png
<div className="h-96 md:h-[480px] mx-auto p-8 mt-2 mb-10 md:mb-2 flex flex-col md:flex-row bg-section-top bg-no-repeat bg-cover bg-center">
<div className="md:w-3/5 ml-2 md:ml-16 lg:ml-32">
<h1 className="text-5xl ml-2 md:ml-0 text-[#372540] font-bold whitespace-pre-line mb-6 items-start">
<div className="whitespace-pre-line w-full md:w-60 font-sans text-white">
it's not just Taste, It's an experience.
</div>
</h1>
<div className="flex flex-col md:flex-row">
<button id="viewmenu" className="w-full md:w-[185px] flex justify-center items-center mb-4 select-none bg-[#ed1e1a] hover:bg-indigo-500 text-white font-bold py-2 px-4 rounded-full md:mr-2 md:ml-0">
<a href="#" className='mt-0'>View menu</a>
</button>
<button id="bookatable" className="w-full md:w-[185px] flex justify-center items-center mb-4 select-none bg-[#91969c] hover:bg-indigo-500 text-white font-bold py-2 px-4 rounded-full md:ml-2 md:mr-0">
<a href="#" className='mt-0'>Book a table</a>
</button>
</div>
</div>
<div className="w-full md:w-3/5 mt-4 md:mt-0 md:mr-10 md:ml-[-50px] md:mt-[-40px] relative">
<div id="randomfood" className="overflow-hidden">
<div className="flex items-center justify-center">
<div className="w-[350px] flex bg-[#ffffff] items-center md:mt-28 rounded-2xl">
<img
src={imageUrls[0]}
alt="Main Image"
className="md:w-80 md:h-50 object-cover md:ml-4 md:mt-4 md:mb-4 rounded-2xl"
/>
</div>
</div>
</div>
<div class="relative">
<div class="w-full h-full bg-yellow-400 relative md:ml-60 md:mt-24">
<div class="absolute bottom-0 right-0">
<div class="w-72 h-72 bg-yellow-400 transform rotate-45"></div>
</div>
</div>
</div>
</div>
</div>