如何用CSS制作顶部外凸的弧形三角形？

基于你提供的代码思路，我们可以通过调整伪元素的尺寸、位置和旋转参数，结合calc精准控制宽高，实现顶部外凸且顶部更宽的弧形三角形（匹配示例图的栗色部分）。以下是优化后的完整实现：

完整代码 #

<div class="curved-triangle"></div>

.curved-triangle {
  position: relative;
  height: 200px;
  width: 200px;
  overflow: hidden;
  /* 保留原3D旋转效果，不需要可直接删除 */
  transform: rotateY(30deg);
}

.curved-triangle:before {
  position: absolute;
  content: '';
  /* 向左偏移，让宽于容器的伪元素水平居中 */
  left: calc(-20%);
  /* 用calc固定垂直位置，让伪元素底部与容器对齐 */
  top: calc(100% - 194px);
  /* 宽度设为容器的140%，减去边框总宽度避免溢出，实现顶部外扩 */
  width: calc(140% - 6px);
  height: calc(100% - 6px);
  /* 顶部双圆角实现外凸弧形 */
  border-radius: 100% 100% 0 0;
  /* 旋转角度配合宽尺寸，形成顶部外凸的三角形态 */
  transform: rotate(-90deg);
  border: 3px solid #800020;
  /* 填充栗色，匹配示例图样式 */
  background-color: #800020;
}

关键调整说明 #

• 顶部加宽逻辑：通过calc(140% - 6px)将伪元素宽度设为容器的140%（超出部分形成顶部外凸），减去边框总宽度（3px*2）避免溢出容器。同时用left: calc(-20%)让伪元素水平居中，保证顶部外凸对称。
• 位置精准控制：top: calc(100% - 194px)中，194px是容器高度200px减去边框总宽度6px，确保伪元素底部与容器底部完全对齐。
• 弧形与形态调整：将border-radius改为100% 100% 0 0，形成完整的顶部外凸弧形；旋转角度调整为-90deg，配合宽尺寸的伪元素，最终呈现顶部外凸的弧形三角。

如果需要更大的外凸幅度，只需修改宽度百分比（比如设为150%），同时对应调整left的偏移量（比如calc(-25%)）即可。

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