CSS中如何计算vw和vh的比例答案

【问题标题】：How to calculate the proportion between vw and vh in CSSCSS中如何计算vw和vh的比例
【发布时间】：2020-12-21 04:49:42
【问题描述】：

我一直在做一个网站，我正在尝试在 div 中使用 clip-path 属性来创建一个箭头形状，我打算让它成为一个直角三角形，我得到了这个现在的结果：

.aboutus {
    width: 100%;
    height: 50vh;
    position: relative;
    background: #589AB8;
    clip-path: polygon(0% 100%, 40% 100%, 50% 50%, 60% 100%, 100% 100%, 100% 0%, 0% 0%);
}

<div id="aboutus" class="aboutus">
</div>

我想知道是否有一种方法可以获得 vh 和 vw (vh/vw) 之间的比例以保持任何视口的三角形边的比例，而不会在我更改视口时变形大小。

或者如果您对它保持形状有任何建议，我会欢迎它。

谢谢

【问题讨论】：

vh 和 vw 之间没有关系，因为视口是完全随机的，取决于监视器、设备和窗口大小。您将需要 javascript 来收集边界框大小。
你能澄清一下尺寸（宽度和高度）是如何设置的吗？你也考虑过 vmin 或 vmax 吗？你期望那个三角形的实际尺寸是多少？（剪辑路径可以采用 calc() 函数）。例如，无论容器大小如何，三角形都保持相同大小：clip-path: polygon(0% 100%, calc(50% - 20px) 100%, 50% calc(100% - 20px ), calc(50% + 20px) 100%, 100% 100%, 100% 0%, 0% 0%);

标签： html css clip-path

【解决方案1】：

calc() 函数管理帮助

calc() CSS 函数允许您在指定 CSS 属性值时执行计算。它可以在任何允许使用<length>、<frequency>、<angle>、<time>、<percentage>、<number> 或 <integer> 的地方使用。

始终为 20px/30px 的三角形

.aboutus {
    width: 100%;
    height: 50vh;
    position: relative;
    background: #589AB8;
    clip-path: polygon(0% 100%, calc(50% - 20px) 100%, 50% calc(100% - 20px ), calc(50% + 20px)  100%, 100% 100%, 100% 0%, 0% 0%);
}

<div id="aboutus" class="aboutus">
</div>

从 vmin 设置的三角形

.aboutus {
    width: 100%;
    height: 50vh;
    position: relative;
    background: #589AB8;
    clip-path: polygon(0% 100%, calc(50% - 10vmin) 100%, 50% calc(100% - 10vmin ), calc(50% + 10vmin)  100%, 100% 100%, 100% 0%, 0% 0%);
}

<div id="aboutus" class="aboutus">
</div>

从 vmax 设置的三角形

.aboutus {
    width: 100%;
    height: 50vh;
    position: relative;
    background: #589AB8;
    clip-path: polygon(0% 100%, calc(50% - 5vmax) 100%, 50% calc(100% - 5vmax), calc(50% + 5vmax)  100%, 100% 100%, 100% 0%, 0% 0%);
}

<div id="aboutus" class="aboutus">
</div>

vh/vw 的混合体？也许你想做什么？

.aboutus {
    width: 100%;
    height: 50vh;
    position: relative;
    background: #589AB8;
    clip-path: polygon(0% 100%, calc(50% - (5vh + 2.5vw)) 100%, 50% calc(100% - (5vh + 2.5vw)), calc(50% + (5vh + 2.5vw))  100%, 100% 100%, 100% 0%, 0% 0%);
}

<div id="aboutus" class="aboutus">
</div>

【讨论】：

【解决方案2】：

除了我推荐的the answer of @G-Cyrillus，你可以考虑使用遮罩和一些CSS变量来轻松控制形状和保持比例。

.aboutus {
    --angle:45deg;
    --d:10vh;
    
    height: 50vh;
    background: #589AB8;
    margin:5px;
    --g:transparent var(--d),#fff calc(var(--d) + 1px);
    -webkit-mask:
      linear-gradient(        var(--angle) ,var(--g)) right,
      linear-gradient(calc(-1*var(--angle)),var(--g)) left ;
    -webkit-mask-size:50% 100%;
    -webkit-mask-repeat:no-repeat;
    mask:
      linear-gradient(        var(--angle) ,var(--g)) right,
      linear-gradient(calc(-1*var(--angle)),var(--g)) left ;
    mask-size:50% 100%;
    mask-repeat:no-repeat;
}

<div class="aboutus"></div>
<div class="aboutus" style="--angle:60deg;"></div>

<div class="aboutus" style="--angle:30deg;--d:30px;"></div>

【讨论】：