How do I position a circlular div halfway over an angled div? - html

Question

I am currently trying to build a portfolio website. Here is my landing page idea:
The part that I am struggling with regarding this design is positioning the down arrow so that it straddles the angled div regardless of screen width.
The closest that I have been able to come is by assigning the following values to the button...
position: absolute;
top: 290px;
left: 30%;
Here is my code:
*,
*:before,
*:after {
box-sizing: border-box;
padding: 0;
margin: 0;
}
section {
width: 100%;
min-height: 400px;
}
.bg-hero {
background: #00C1F7;
position: relative;
}
.bg-dark {
background: #003342;
position: relative;
}
.angled-div::before {
content: '';
width: 100%;
height: 100%;
position: absolute;
background: inherit;
z-index: -1;
bottom: 0;
transform-origin: left bottom;
transform: skewY(-3deg);
z-index: 1;
}
.button {
height: 150px;
width: 150px;
position: absolute;
top: 290px;
left: 30%;
background: #003342;
border-radius: 150px;
z-index: 2;
}
.button span {
width: 100%;
text-align: center;
color: white;
position: absolute;
top: 20px;
font-size: 62px;
}
.button:hover {
cursor: pointer;
background: #004472
}
<section class="bg-hero"></section>
<div class="button"><span>↓</span></div>
<section class="bg-dark angled-div"></section>
Question
How do I position my div so that it is halfway over the angled div and remains exactly half way over the angled div no matter the screen width?

Answer 1

You can have a near perfect centering if you can change your markup:
Change the skewed pseudo element to a span and position the button inside the span so that the button is also skewed.
Center the button using the below and also make a reverse skew:
position: absolute;
top: 0;
left: 50%;
transform: translate(-50%, -100%) skew(3deg);
transform-origin: left bottom;
Now make the contents of the button vertical using transform: rotate(3deg) on the button span element.
Now you can change the value of top (say 50px) to push the button inside the skewed section as much as needed.
See demo below:
*,
*:before,
*:after {
box-sizing: border-box;
padding: 0;
margin: 0;
}
section {
width: 100%;
min-height: 400px;
}
.bg-hero {
background: #00C1F7;
position: relative;
}
.bg-dark {
background: #003342;
position: relative;
}
.angled-div > span{
width: 100%;
height: 100%;
position: absolute;
background: inherit;
z-index: -1;
bottom: 0;
transform-origin: left bottom;
transform: skewY(-3deg);
z-index: 1;
}
.button {
height: 150px;
width: 150px;
position: absolute;
top: 50px;
left: 50%;
transform: translate(-50%, -100%) skew(3deg);
background: #003342;
border-radius: 150px;
z-index: 2;
transform-origin: left bottom;
}
.button span {
width: 100%;
text-align: center;
color: white;
position: absolute;
top: 20px;
font-size: 62px;
transform: rotate(3deg);
}
.button:hover {
cursor: pointer;
background: #004472;
}
<section class="bg-hero"></section>
<section class="bg-dark angled-div">
<span>
<div class="button"><span>↓</span></div>
</span>
</section>