How to calculate the proportion between vw and vh in CSS

user_14140560 0
Viewed 772

I've been working on a website and as I'm trying to use the clip-path property in a div in order to create an arrow shape which I intend for it to be a right triangle, I'm getting this result by now:

.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>

I want to know if there is a way in which I can obtain the proportion between vh and vw (vh/vw) to get to mantain the proportion of the triangle sides for any viewport, without it deformating when I change the viewport size.

Or if you have any suggestions for it to mantain the shape, I will welcome it.

Thanks

clip-path css html
2 Answers

The calc() function mgiht help

The calc() CSS function lets you perform calculations when specifying CSS property values. It can be used anywhere a <length>, <frequency>, <angle>, <time>, <percentage>, <number>, or <integer> is allowed.

  • a triangle always of 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>

  • a triangle set from 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>

  • a triangle set from 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>

  • a mix of vh/vw ?, maybe what you try to do ?

.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>

user_24420990

In addition to the answer of @G-Cyrillus that I recommend you can consider the use of mask and some CSS variables to easily control the shape and maintain the proportion.

.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>

user_86203330
Related