hassan hassan - 8 days ago 6
CSS Question

make a division with a top triangle form and shadow

I need to make with html and css the same look of the image as shown below:

triangle top with shadow and border gradient color

Answer

try to something like this...

     #trapezoid {
            border-bottom: 60px solid red;
            border-left: 0px solid transparent;
            border-right: 0px solid transparent;
            height: 0;
            width: 320px;
        }
        #triangle-up {
            width: 0; height: 0;
            border-left: 160px solid transparent;
            border-right: 160px solid transparent;
            border-bottom: 50px solid red;
        }
   <div id="triangle-up"></div>
   <div id="trapezoid"></div>