如何使用CSS实现带圆角顶点的三角形效果？

原来用clip-path: polygon()做的三角形没法加圆角，因为多边形顶点都是硬角，换用clip-path: path()定义带圆角的路径就能解决问题，直接修改你的CSS代码即可：

.contact {
  display: flex;
  position: relative;
  background-color: #aa76ed;
  height: 330px;
  border-radius: 30px;
  z-index: 1;
  overflow: hidden; /* 防止三角形超出容器显示 */
}

.triangle {
  position: absolute;
  top: 0;
  width: 100%;
  height: 150%;
  background: rgba(255, 255, 255, 0.1);
  z-index: 0;
  /* 用path定义带圆角的三角形，15px是圆角半径，可按需调整 */
  clip-path: path('M0,100% Q0,100% 15px,95% L50%,50% L98%,95% Q100%,100% 100%,100% Z');
  transform: rotate(180deg);
}

.contact .left-aside {
  width: 33%;
  height: 100%;
}
.contact .right-aside {
  width: 66%;
  color: #ffffffcc;
  display: flex;
  flex-direction: column;
  justify-content: center; /* 实现内容垂直居中 */
  padding: 0 2rem;
}

.contact .right-aside h3 {
  font-size: 200%;
  margin: 0 0 1rem;
}

HTML部分不需要改动，直接沿用你原来的结构就行。

关键说明： #

• clip-path: path()里的Q是二次贝塞尔曲线指令，用来生成圆角，比如Q0,100% 15px,95%就是在左下角生成15px的圆角，你可以把15px改成想要的圆角大小；
• 给.contact加overflow: hidden是为了防止三角形超出容器的圆角部分露出来；
• 调整了.right-aside的布局，用flex实现垂直居中，比原来的vertical-align更稳定。

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