如何在CSS中计算vw和vh之间的比例

Question

我一直在开发一个网站，现在我尝试使用clip-path属性在一个div中创建一个箭头形状，我想把它做成一个直角三角形，但是目前得到的结果如下：

.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)，以便在任何视口大小改变时都能保持三角形边的比例而不使其变形。

如果您有任何建议可以维护形状，我将非常欢迎。

谢谢

- Kaylee Paez

---

因为视口大小完全基于监视器、设备和窗口大小等因素，所以vh和vw之间没有关系。您需要使用JavaScript来获取边界框的大小。 - Paulie_D

你能否澄清一下，实际上尺寸（宽度和高度）是如何设置的？你是否也考虑了vmin或vmax？你期望这个三角形的真实大小是多少？（clip-path可以使用calc()函数）。例如，一个三角形保持相同的大小，无论容器的大小如何： clip-path: polygon(0% 100%, calc(50% - 20px) 100%, 50% calc(100% - 20px ), calc(50% + 20px) 100%, 100% 100%, 100% 0%, 0% 0%); - G-Cyrillus

Answer 1

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

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>

- G-Cyrillus

Answer 2

除了我推荐的@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>

- Temani Afif