CSS 自定义形状不可缩放

Question

我用 CSS 创建了 4 星形状。现在我希望它可以根据屏幕尺寸调整大小。除了这个形状之外，我页面上的其他所有内容都会响应屏幕尺寸。这是它的代码

#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: "";    

}

我尝试了从 rem 到 px 的不同单位，但它仍然没有按比例缩小或放大。在较小的宽度上，它会填满整个视口。有没有办法让它可以调整大小？

Answer 1

使用大众

#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 自定义形状不可缩放

CSS Custom shape is not scalable

html

css

responsive-design

responsive