CSS Custom shape is not scalable

Question

I created 4-star shape with CSS. Now I want it to be resizable relative to screen size. Everything else on my page is responsive to screen size, except this one shape. Here's the code for it

#vert    {    
    position: relative;    
    border-bottom: 18em solid @444;    
    border-left: 16em solid transparent;    
    border-right: 16em solid transparent;    
    top: -7rem;   
    content: "";    

}

#vert::after    
{    
    position: absolute;    
    border-top: 18em solid #444;    
    border-left: 16em solid transparent;    
    border-right: 16em solid transparent;    
   bottom: -32rem;    
   left: -16rem;     
    content: "";    

}

#hori    
{
    position: absolute;    
    border-left: 19em solid #444;    
    border-top: 12em solid transparent;    
    border-bottom: 12em solid transparent;    
    top: -3rem    
    right: -3rem;    
    content: "";     

}
#hori::before    
{    
    position: absolute;    
    border-right: 19em solid #444;    
    border-top: 12em solid transparent;    
    border-bottom: 12em solid transparent;    
    top: -12rem;    
    left: -38rem;    
    content: "";    

}

I tried with different units from rem to px but its still not scaling down, or up. On smaller widths it fills up the whole viewport. Is there a possible way to make it resizeable?

Answer 1

use vw

 #vert { position: relative; border-bottom: 10vw solid #444; border-left: 34vw solid transparent; border-right: 34vw solid transparent; top: 5vw; content: ""; } #vert::after { position: absolute; border-top: 10vw solid #444; border-left: 20vw solid transparent; border-right: 20vw solid transparent; bottom: -25vw; left: -7vw; content: ""; }

 <body> <div id='vert'></div> </body>

CSS Custom shape is not scalable

Question

1 answers

solution1
2 ACCPTED 2022-02-24 00:20:05

CSS Custom shape is not scalable

Question

1 answers

solution1 2 ACCPTED 2022-02-24 00:20:05

solution1
2 ACCPTED 2022-02-24 00:20:05