如何将圆形 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放在[=52=里面] span 这样 button 也 倾斜 .

2. 使用下面的 button 居中并进行 reverse 倾斜：

   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>