Html 如何将圆形潜水器放置在倾斜潜水器的一半位置？

我目前正试图建立一个投资组合网站。以下是我的登录页想法：

关于这个设计，我正在努力解决的部分是定位向下箭头，使其跨过倾斜的div，而不考虑屏幕宽度

我所能得到的最接近的方法是将以下值分配给按钮

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

这是我的密码：

*，
*：之前，
*：之后{
框大小：边框框；
填充：0；
保证金：0；
}
部分{
宽度：100%；
最小高度：400px；
}
.bg英雄{
背景：#00C1F7；
位置：相对位置；
}
.bg暗{
背景#003342；
位置：相对位置；
}
有角度的div：：之前{
内容：''；
宽度：100%；
身高：100%；
位置：绝对位置；
背景：继承；
z指数：-1；
底部：0；
变换原点：左下角；
变换：歪斜（-3deg）；
z指数：1；
}
.按钮{
高度：150像素；
宽度：150px；
位置：绝对位置；
顶部：290px；
左：30%；
背景#003342；
边界半径：150px；
z指数：2；
}
.按钮跨度{
宽度：100%；
文本对齐：居中；
颜色：白色；
位置：绝对位置；
顶部：20px；
字体大小：62px；
}
.按钮：悬停{
光标：指针；
背景：#004472
}

&达尔；

如果您可以更改标记，您可以拥有近乎完美的居中：

将扭曲的伪元素更改为

span

，并将

按钮定位在
span
内，以便
按钮也扭曲

使用下面的按钮将

按钮居中，并进行反向倾斜：

现在使用

按钮span

元素上的

变换：旋转（3deg）

使

按钮的内容垂直

现在，您可以根据需要更改

top

（例如50px）的值，以在倾斜部分内按

按钮

请参见下面的演示：

*，
*：之前，
*：之后{
框大小：边框框；
填充：0；
保证金：0；
}
部分{
宽度：100%；
最小高度：400px；
}
.bg英雄{
背景：#00C1F7；
位置：相对位置；
}
.bg暗{
背景#003342；
位置：相对位置；
}
.角度div>span{
宽度：100%；
身高：100%；
位置：绝对位置；
背景：继承；
z指数：-1；
底部：0；
变换原点：左下角；
变换：歪斜（-3deg）；
z指数：1；
}
.按钮{
高度：150像素；
宽度：150px；
位置：绝对位置；
顶部：50px；
左：50%；
变换：平移（-50%，-100%）倾斜（3deg）；
背景#003342；
边界半径：150px；
z指数：2；
变换原点：左下角；
}
.按钮跨度{
宽度：100%；
文本对齐：居中；
颜色：白色；
位置：绝对位置；
顶部：20px；
字体大小：62px；
变换：旋转（3deg）；
}
.按钮：悬停{
光标：指针；
背景：#004472；
}

&达尔；

我最诚挚的道歉，Paulie，我想我可以通过一个指向CodePen的链接逃脱惩罚。以后我一定要遵守规则。谢谢。没问题，但我认为JS是答案。哇，只是哇。。。这是一个天才级的解决方案！肯定会再提到这个。非常感谢你！

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