How to give height according to parent section to make a triangle in css.?

Question

I want to make a triangle using css and i want to give a base according to the width of the parent section width i defined. Below are the id and class i used for it

.Workingon{
    display: block;
    background-color: rgb(23, 23, 36);
    height: 500px;
    width: 95%;
    margin: auto;
    position: relative;
    overflow: hidden;
}
#UpTriangle{
    width: 0;
    height: 0;
    position: absolute;
    border-left: calc(100%-10px) solid transparent;
    border-right: calc(100%-10px) solid transparent;
    border-top:500px solid red;
}

Here below is html code.

  <section class="Workingon">
         <div id="UpTriangle">
         </div>
    </section>

stop using the border trick, check the clip-path solution: https://stackoverflow.com/a/35896783/8620333 — Temani Afif, Jan 16 '22 at 11:01

score 0 · Answer 1 · answered Jan 16 '22 at 11:10

0

Unfortunately, border-width cannot use a % value as any % is NOT related to size of the element.

So, basically...NO you can't use calc WITH % for border-width because it doesn't know what it's supposed to be a % of.

answered Jan 16 '22 at 11:10

Arezou Saremian

508
3
8

So what is the solution for this – Praveen Kumar Jan 16 '22 at 11:18
@praveen-Kumar Use the clip-path – Arezou Saremian Jan 16 '22 at 12:33

How to give height according to parent section to make a triangle in css.?

1 Answers1