外角圆形设计气球

Question

我正在尝试弄清楚如何为聊天气泡制作外角圆形设计，以获得所需的结果：

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

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

.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

嘿，我没有使用 :after 实现。相反，我使用了单独的 div 元素，并只给它们适当的 height 和 right-top/left-top border-radius 就像这样：-

.balloon {
      margin: 40px;
      display: inline-block;
      position: relative;
      width: 200px;
      height: auto;
      background-color: rgb(114, 238, 110) ;
    }
    
    .txt{
      padding: 10px;
    }
    
.bubble-right{
height:50px;
background:white;
border-top-right-radius:50%;
}

.bubble-left{
height:50px;
background:white;
border-top-left-radius:50%;
}

<div class="balloon right">
      <div class="txt">
        <p>Hello world right side</p>
      </div>
      <div class='bubble-right'>
      </div>
    </div>
    
    <div class="balloon left">
      <div class="txt">
        <p>Hello world left side</p>
      </div>
      <div class='bubble-left'>
    </div>

Answer 2

编辑： 您可以将 :left 和 :right 与 剪辑路径 和 多边形 形状一起使用，以在伪元素上创建剪辑.

#chatbox {
  height: 600px;
  width: 600px;
  background: url('https://allhdwallpapers.com/wp-content/uploads/2015/05/circle-8.jpg') no-repeat;
}

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

.txt {
  padding: 10px;
}

.right:before {
  content: ' ';
  position: absolute;
  right: 0px;
  bottom: -20px;
  height: 20px;
  width: 60px;
  background-color: rgb(114, 238, 110);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 96% 80%, 91% 63%, 83% 45%, 72% 28%, 56% 15%, 39% 7%, 21% 3%);
  -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 96% 80%, 91% 63%, 83% 45%, 72% 28%, 56% 15%, 39% 7%, 21% 3%);
}

.left:before {
  content: ' ';
  position: absolute;
  height: 20px;
  bottom: -20px;
  width: 60px;
  left: 0px;
  bottom: -20px;
  background-color: rgb(114, 238, 110);
  clip-path: polygon(0 0, 100% 0, 77% 2%, 59% 6%, 42% 13%, 26% 25%, 14% 41%, 8% 59%, 4% 78%, 0 100%);
  -webkit-clip-path: polygon(0 0, 100% 0, 77% 2%, 59% 6%, 42% 13%, 26% 25%, 14% 41%, 8% 59%, 4% 78%, 0 100%);
}

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 id="chatbox">
  <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>

Answer 3

渐变背景可以做到：

.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>

外角圆形设计气球

Outer corner round design balloon

html

css

chat