基于Tailwind与SCSS实现偏移旋转边框

我看了你的代码，问题主要出在伪元素的定位和尺寸设置上——你用了固定的宽高和margin值，这肯定没法适配不同屏幕，而且父元素没设相对定位，伪元素的绝对定位会跑偏。下面是调整后的方案，完美解决你的需求：

问题分析 #

• .call-to-action 没有设置 position: relative，导致伪元素的绝对定位相对于整个文档，而非目标区块
• 伪元素用了固定的 width: 80rem 和 height: 20rem，无法自动匹配父元素尺寸
• 固定的 margin-left: -30px 在响应式场景下会出现适配问题

修改后的代码 #

HTML（保持原结构即可，无需额外改动） #

<div class="">
  <div class="max-w-7xl mx-auto px-8">
    <div class="grid grid-cols-2 md:grid-cols-2 shadow-xl rounded-xl bg-white call-to-action">
      <div class="rounded-l-xl" style=" background-image: url(https://images.unsplash.com/photo-1644229041683-f5334a27363f?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=870&q=80); background-position: center; background-size: cover; clip-path: polygon(0 0, 100% 0, 90% 100%, 0% 100%); " ></div>
      <div class="py-16 px-8 space-y-4 bg-white rounded-r-xl">
        <p class="text-3xl text-slate-700 leading-tight">Lorem Ipsum</p>
        <p class="text-slate-600 text-base"> Lorem ipsum dolor, sit amet consectetur adipisicing elit. Quam veritatis explicabo corporis odio perspiciatis, error cum ut illum iste atque, fugit unde voluptates sapiente delectus vitae quidem cupiditate rem? Nostrum! </p>
        <div class="">
          <a class="bg-blue-500 px-3 py-3 rounded-sm text-white" href="" >Go To Link</a >
        </div>
      </div>
    </div>
  </div>
</div>

SCSS（核心修改部分） #

.call-to-action {
  position: relative; /* 关键：让伪元素相对于这个容器定位 */
  height: 20rem;

  &:before {
    content: "";
    position: absolute;
    inset: 0; /* 等同于top:0; right:0; bottom:0; left:0; */
    width: 100%;
    height: 100%;
    transform: translate(-1.5rem, 0.5rem) rotate(2deg); /* 平移+旋转，代替固定margin */
    z-index: -1;
    border: 10px solid #fff018;
    border-radius: inherit; /* 继承父元素的圆角，保持视觉统一 */
    background-clip: padding-box;
  }

  /* 响应式调整：小屏幕缩小平移距离，避免边框超出视口 */
  @media (max-width: 768px) {
    &:before {
      transform: translate(-0.8rem, 0.3rem) rotate(1deg);
    }
  }
}

关键说明 #

1. 相对定位：给.call-to-action加上position: relative，确保伪元素的绝对定位是相对于这个区块，而非整个页面
2. 自适应尺寸：用inset:0+width:100%+height:100%让伪元素完全覆盖父元素，自动匹配区块尺寸
3. 灵活变换：用transform: translate()代替固定margin，配合旋转效果，让边框的偏移和角度可以轻松调整，且不会影响正常布局
4. 响应式适配：通过媒体查询在小屏幕调整平移和旋转参数，避免边框超出屏幕范围
5. 圆角继承：border-radius: inherit保证边框圆角和父元素一致，视觉更协调

这样修改后，边框会自动匹配区块的尺寸，在不同屏幕下都能正常显示，旋转效果也能完美呈现。

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