如何利用伪元素为带倾斜效果的HTML元素实现右侧圆角边（支持文本内容与响应式）

嗨，我来帮你搞定这个问题！你已经完成了倾斜效果的设置，现在就差右侧的圆角边对吧？咱们可以通过调整伪元素的样式，让它完美适配倾斜后的容器，同时保证文本换行时依然能响应式适配。

核心思路 #

你的原代码用白色矩形覆盖右侧，但没法形成圆角。我们可以改用正圆伪元素，配合反向倾斜抵消容器的变换，再通过精准定位让它刚好在倾斜容器的右侧形成圆角效果，同时保证垂直居中适配不同高度的容器（比如文本换行后的情况）。

完整实现代码 #

body {
  padding: 20px; /* 加一点内边距方便预览效果 */
  width: 200px;
}

.container {
  background-color: red;
  transform: matrix(1, -0.03, 0.03, 1, 0, 0);
  padding: 10px 15px; /* 调整上下内边距，让文本更舒适 */
  position: relative;
  margin-bottom: 20px; /* 两个容器之间留间距 */
}

.container::after {
  content: '';
  background: white; /* 这里要和页面背景色一致，用来模拟圆角缺口 */
  width: 30px; /* 宽度设为容器水平内边距的2倍，刚好覆盖右侧边角 */
  height: 30px;
  border-radius: 50%; /* 做成正圆 */
  position: absolute;
  right: -15px; /* 定位到容器右侧边缘外，值为水平内边距的负值 */
  top: 50%;
  /* 反向倾斜，抵消容器的transform，让圆形保持正圆不变形 */
  transform: translateY(-50%) matrix(1, 0.03, -0.03, 1, 0, 0);
}

<div class="container">
  <p>Long text Long text Long text Long text Long text</p>
</div>

<div class="container">
  <p>Short text</p>
</div>

关键细节解释 #

• 正圆伪元素：用border-radius: 50%创建正圆，宽高设为容器水平内边距的2倍，刚好能覆盖容器右侧的上下边角，形成完整的圆角效果。
• 垂直居中定位：top: 50% + transform: translateY(-50%)让伪元素始终垂直居中，不管容器高度怎么变化（比如文本换行后高度增加），圆角都会保持在右侧中间位置。
• 反向倾斜抵消：因为容器用matrix做了倾斜，伪元素会继承这个变换导致圆形变形，所以我们给伪元素加了反向的matrix变换，抵消容器的倾斜，让圆形保持正圆，视觉上更自然。
• 响应式适配：整个方案完全依赖容器的内边距和相对定位，文本换行时容器高度自动调整，伪元素的定位也会跟着适配，不需要额外的媒体查询。

这样调整后，你就能得到带倾斜效果、右侧圆角、支持文本内容和响应式的HTML元素啦！

备注：内容来源于stack exchange，提问作者Sigurd Mazanti