html - 外 Angular 圆形设计气球

Question

我试图弄清楚如何为聊天气泡制作外 Angular 圆形设计，以获得所需的结果:

我必须使用气泡作为不同背景的组件，没有相同和纯色，但有一些设计元素，所以气泡周围的空间必须是透明的:

我试过将元素添加为单独的部分，但似乎不正确的方法将它固定在正确的位置，改变屏幕大小作为单独的部分，并在气泡方 Angular 后面隐藏表单的下端:

.balloon {
  margin: 40px;
  display: inline-block;
  position: relative;
  width: 200px;
  height: auto;
  background-color: rgb(114, 238, 110);
}

.txt {
  padding: 10px;
}

.right:after {
  content: " ";
  position: absolute;
  right: 0px;
  bottom: -20px;
  border: 12px solid;
  border-color: rgb(114, 238, 110) rgb(114, 238, 110) transparent transparent;
}

.left:after {
  content: " ";
  position: absolute;
  bottom: -20px;
  border: 22px solid;
  border-color: transparent transparent transparent rgb(114, 238, 110);
}

div.selectable div.active:after {
  content: "";
  position: absolute;
  margin-right: -8px;
  width: 37px;
  height: 15px;
  border-right: 8px solid rgb(114, 238, 110);
  border-top: 8px solid rgb(114, 238, 110);
  border-top-right-radius: 39px;
}

<div class="balloon right">
  <div class="txt">
    <p>Hello world right side</p>
  </div>
</div>

<div class="balloon left">
  <div class="txt">
    <p>Hello world left side</p>
  </div>
</div>

<div class="balloon right">
  <div class="txt">
    <p>Hello world</p>
  </div>
  <div class="selectable">
    <div class="active"></div>
  </div>
</div>

Answer 1

渐变背景可以做到:

.box {
  width:200px;
  height:100px;
  display:inline-block;
  margin:10px;
  background:
    linear-gradient(green 0 0) top/100% calc(100% - 34px),
    radial-gradient(105% 100% at bottom left,transparent 97%,green) bottom right/40% 35px;
  background-repeat:no-repeat;
}
.left {
  background:
    linear-gradient(green 0 0) top/100% calc(100% - 34px),
    radial-gradient(105% 100% at bottom right,transparent 97%,green) bottom left/40% 35px;
  background-repeat:no-repeat;
}

body {
  background:linear-gradient(to right,lightblue,#f2f2f2);
}

<div class="box">
</div>

<div class="box left">
</div>