如何将圆形 div 放置在有角度的 div 的中间？

Question

我目前正在尝试建立一个投资组合网站。这是我的目标网页创意：

我在这个设计中苦苦挣扎的部分是定位向下箭头，以便它跨越有角度的 div，而不管屏幕宽度如何。

我能做到的最接近的方法是为按钮分配以下值...

position: absolute;
top: 290px;
left: 30%;

这是我的代码：

*,
*: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>&darr;</span></div>
<section class="bg-dark angled-div"></section>

问题

如何定位我的 div，使其位于倾斜 div 的一半，并且无论屏幕宽度如何，都保持在倾斜 div 的一半？

Answer 1

如果你可以改变你的标记，你可以有一个接近完美的居中：

1. 将 skewed 伪元素更改为 span 并将 button 在 span 中，这样button 也是 歪斜。

2. 使用下面的方法将button居中，并进行反向倾斜：

   position: absolute;
   top: 0;
   left: 50%;
   transform: translate(-50%, -100%) skew(3deg);
   transform-origin: left bottom;
   

3. 现在使用button span 元素上的transform: rotate(3deg) 使button 的内容垂直。

4. 现在您可以更改 top 的值（例如 50px），以根据需要将button 推送到 skewed 部分中。

请看下面的演示：

*,
*: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>&darr;</span></div>
  </span>
</section>