Question 384217 in CSS Question posted in
Some basic documentation can be found here.

Create a triangle at the bottom right corner of the parent div using tailwind css

How can we create a triangle at the bottom right corner of the parent div. I have tried something using tailwind css, but it is extending the sides of triangle to the outside of the parent div, how can not display that extended part ? Could someone please advise.

enter image description here

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

2

Answers


  1. 0

    You used height and width in CSS, So it will render a box with that height and width, Otherthan that this code will help you to create a triangle

    <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>
    Login or Signup to reply.
  2. 0

    You could use a CSS Triangle Generator to help you achieve this and get a better understanding of how it works, using minimal HTML and CSS. This snippet should be a good starting point:

    .triangle {
    width: 0px;
    height: 0px;
    border-style: solid;
    border-width: 75px 129.9px 75px 0;
    border-color: transparent #FFEC33 transparent transparent;
    transform: rotate(0deg);
}
    <div class="triangle"></div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search