我来帮你梳理下问题根源，然后一步步搞定：

你的代码里的核心问题 #

1. :before伪元素无尺寸：默认状态下伪元素宽高都是0，哪怕背景图设置正确也看不到
2. 背景图属性写法错误：不能把no-repeat直接跟在url()后面，得用独立属性或者正确的简写格式
3. 层级与定位错误：z-index: -1会让伪元素跑到按钮背景色下方，完全被遮挡；旋转后也没调整位置，容易让背景图偏移出按钮可视区域

修正后的完整解决方案 #

我们保留按钮本身的红色背景，用:before伪元素承载旋转后的透明拱形图，确保它叠加在背景色上方、文字下方，同时适配旋转后的显示范围：

#sign-in-button .btn.btn-default {
    color: #fff;
    background-color: #da1a32;
    position: relative;
    overflow: hidden;
    padding: 12px 24px; /* 给背景图留出足够显示空间 */
}

#sign-in-button .btn.btn-default:before {
    content: "";
    position: absolute;
    top: -15%;
    left: -15%;
    width: 130%;
    height: 130%;
    z-index: 1; /* 放在背景色上方、文字下方 */
    background: url('/images/arch-red-flip.png') no-repeat center center / cover;
    transform: rotate(30deg);
    transform-origin: center center; /* 以按钮中心为旋转轴 */
}

/* 确保按钮文字始终在最上层 */
#sign-in-button .btn.btn-default {
    position: relative;
    z-index: 2;
}

关键修改说明 #

• 给伪元素扩尺寸：把宽高设为130%并偏移位置，避免旋转后背景图边缘被按钮裁切
• 修正背景图写法：用background简写属性整合图片、重复、定位、缩放规则，更清晰
• 调整层级关系：z-index:1让伪元素的透明图叠加在红色背景上，z-index:2保证按钮文字不被遮挡
• 简化选择器：把复杂的子代选择器改成#sign-in-button .btn.btn-default，更简洁且不影响匹配精度

这样调整后，按钮本身完全不旋转，只有背景图按设定角度旋转，透明拱形效果也能正常显示在红色背景之上啦。

内容的提问来源于stack exchange，提问作者lcgsrick