如何将一个圆形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. 将倾斜的伪元素更改为span，并将button 置于 span内，以便button也倾斜。

2. 使用下面的button居中，并使反向偏斜：

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

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

4. 现在，您可以更改top（例如50px）的值，以便根据需要推送倾斜部分内的button。

见下面的演示：

*,
*: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>