平行于x轴的旋转按钮阴影

Question

我创建了一个旋转的动画按钮，我希望它具有与x轴平行的阴影。现在没有阴影了，您是否知道如何制作阴影？谢谢。这是现有按钮的CSS，以及带有“实时示例”的指向代码盘的链接。

.btnMail{
    border-radius: 4px;
    background-color: rgba(120, 0, 255, 0.8);
    border: none;
    color: white;
    padding: 12px 16px;
    font-size: 30px;
    cursor: pointer;
    transform: rotate(-10deg);
   transform-origin: bottom left;
    box-shadow: 0 8px 6px -6px black;
}

https://codepen.io/hubkubas/pen/dmJjWB

Answer 1

基于对问题的理解，您可以通过将shadow-box属性应用于伪元素来获得精美的3D阴影或自定义深度阴影，然后可以进一步操作这些伪元素以获得所需的阴影。