如何使用CSS创建直角三角形渐变并放置在圆形元素中间

你可以通过CSS伪元素+渐变+clip-path的方案实现居中的渐变直角三角形，无需新增额外DOM节点，修改后的完整代码如下：

.play {
  -webkit-appearance: none;
  appearance: none;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  width: 90px;
  height: 90px;
  cursor: pointer;
  border: 9px solid red;
  border-radius: 50%;
  position: relative;
  background-color: #fff;
}
/* 居中的渐变直角三角形实现 */
.play::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 40px;
  height: 40px;
  /* 可自定义渐变角度、色值 */
  background: linear-gradient(135deg, green 0%, blue 100%);
  /* 裁剪为直角三角形，可调整坐标修改形状 */
  clip-path: polygon(0 0, 100% 50%, 0 100%);
}

<button class="play" type="button" aria-label="播放"></button>

参数调整说明：

• 调整三角形大小：直接修改伪元素的width、height属性值即可
• 自定义渐变效果：替换伪元素background的linear-gradient参数，支持多色、不同角度的渐变
• 调整三角形形状：修改clip-path的polygon坐标点，可自由调整直角位置、三角形边长比例
• 需要旋转三角形的话，在伪元素的transform属性中追加rotate(角度值)即可

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