如何在Jetpack Compose中创建自定义形状（如图中蓝色样式）？

可以通过纯CSS实现这个带左侧指向三角的蓝色圆角形状，无需使用图片：

HTML结构 #

<div class="custom-blue-shape">这里填写你需要的内容</div>

CSS样式 #

/* 主体形状样式 */
.custom-blue-shape {
  position: relative;
  background-color: #165DFF; /* 匹配示例的蓝色，可根据实际调整 */
  border-radius: 8px; /* 圆角大小，对应示例的圆角效果 */
  padding: 12px 16px;
  color: #fff;
  width: fit-content;
  max-width: 300px;
  box-shadow: 0 2px 8px rgba(22, 93, 255, 0.3); /* 可选阴影，增强立体感 */
}

/* 左侧指向三角 */
.custom-blue-shape::before {
  content: "";
  position: absolute;
  left: -8px;
  top: 50%;
  transform: translateY(-50%);
  /* 通过边框绘制三角 */
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
  border-right: 8px solid #165DFF;
}

调整说明 #

• 若要匹配示例的蓝色深浅，直接修改background-color和伪元素的border-right颜色值即可
• 修改border-radius的数值可以调整圆角的弧度
• 调整伪元素的边框像素值（比如把8px改成6px），可以改变三角的大小

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