时间戳

首页 > 解决方案 > CSS中如何计算vw和vh的比例

html - CSS中如何计算vw和vh的比例

问题描述

我一直在研究一个网站，当我试图在 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) 之间的比例，以保持任何视口的三角形边的比例，而不会在我更改视口大小时变形。

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

谢谢

标签： htmlcssclip-path

解决方案

功能mgihtcalc()帮助

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>

推荐阅读