Issue
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?
Solution
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>Answered By - DCR
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.