如何垂直翻转CSS实现的ul标签圆角效果？

问题说明 #

需要为<ul>创建圆角效果，但因设计限制无法使用border-radius属性。使用::before和::after伪元素实现顶部圆角后，底部的lime色圆角无法正常显示，需将其垂直翻转并定位到<ul>的左下角。

解决方案 #

通过调整::after伪元素的定位、翻转属性及圆角设置，配合<ul>的基础样式配置，即可实现目标效果：

修改后的完整代码

HTML代码

<ul class="custom-rounded-list">
  <li>列表项1</li>
  <li>列表项2</li>
  <li>列表项3</li>
  <li>列表项4</li>
</ul>

CSS代码

.custom-rounded-list {
  position: relative;
  /* 确保伪元素不会超出ul范围 */
  overflow: hidden;
  padding: 1rem;
  background: #fff;
  border: 1px solid #ccc;
  list-style: none;
}

/* 顶部右上角圆角 */
.custom-rounded-list::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 20px;
  height: 20px;
  background-color: #ccc;
  border-radius: 0 0 0 100%;
}

/* 底部左下角圆角（垂直翻转后） */
.custom-rounded-list::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 20px;
  height: 20px;
  background-color: lime;
  /* 垂直翻转元素 */
  transform: scaleY(-1);
  /* 初始圆角为右上角，翻转后变为左下角 */
  border-radius: 0 0 0 100%;
}

.custom-rounded-list li {
  padding: 0.5rem 0;
}

关键调整说明 #

1. <ul>基础配置：添加position: relative作为伪元素的定位参考，同时设置overflow: hidden，避免伪元素超出<ul>的可视范围。
2. ::after伪元素定位：将bottom: 0和left: 0设置为左下角定位点。
3. 垂直翻转：使用transform: scaleY(-1)实现元素垂直翻转，配合border-radius: 0 0 0 100%的初始圆角设置，翻转后恰好形成左下角的圆角效果。
4. 尺寸匹配：确保伪元素的宽高与圆角半径一致（示例中为20px宽高，对应100%的圆角半径），保证圆角弧度自然。

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