如何将CSS实现的圆角三角形倒置为下拉选择框的三角标记？

没问题！要把这个基于CSS组合的圆角三角形改成下拉选择框常用的向下箭头，只需要调整几个transform属性的参数就能实现。原代码构建的是向上的圆角三角，我们通过反转旋转、倾斜方向和位移来完成倒置，下面是修改后的完整代码：

.triangle { 
  position: relative; 
  background-color: orange; 
}
.triangle:before, .triangle:after { 
  content: ''; 
  position: absolute; 
  background-color: inherit; 
}
.triangle, .triangle:before, .triangle:after { 
  width: 30px; 
  height: 30px; 
  border-top-right-radius: 30%; 
}
/* 核心调整：反转主元素的旋转与倾斜方向 */
.triangle { 
  transform: rotate(60deg) skewX(30deg) scale(1,.866); 
}
/* 适配倒置的伪元素位置与角度 */
.triangle:before { 
  transform: rotate(135deg) skewX(45deg) scale(1.414,.707) translate(0,50%); 
}
.triangle:after { 
  transform: rotate(-135deg) skewY(45deg) scale(.707,1.414) translate(-50%); 
}
/* 以下为演示样式，可按需调整 */
body { padding: 2rem; }

关键修改说明 #

这个圆角三角是由主元素和两个伪元素拼接而成的，倒置的核心是同步调整三个元素的变换参数：

• 主元素：将rotate(-60deg)改为rotate(60deg)，skewX(-30deg)改为skewX(30deg)，保持缩放比例不变，让整体形状方向反转；
• :before伪元素：反转旋转角度（-135deg→135deg）、倾斜方向（-45deg→45deg），并将垂直位移从向上的-50%改为向下的50%，确保它能和主元素正确拼接；
• :after伪元素：同样反转旋转角度（135deg→-135deg）、倾斜方向（-45deg→45deg），将水平位移从向右的50%改为向左的-50%，适配整体倒置后的布局。

这样修改后，你就能得到一个和下拉选择框匹配的向下圆角箭头了，同时保留了原代码的圆角和尺寸特性。

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