使用tailwind css在父div的右下角创建一个三角形

Question

如何在父div的右下角创建一个三角形。我尝试过使用tailwind css，但它正在将三角形的边延伸到父div的外部，如何无法显示该延伸部分？有人可以建议一下吗？

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

Answer 1

您在CSS中使用了高度和宽度，因此它将渲染一个具有该高度和宽度的盒子，除此之外，此代码将帮助您创建一个三角形

<div className="w-0 h-0 
  border-l-[50px] border-l-transparent
  border-b-[75px] border-b-yellow-500
  border-r-[50px] border-r-transparent">
</div>