外角圆形设计气球

html5 • • 问答

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

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

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

.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>
  <div>
    <p>Hello world right side</p>
  </div>
</div>

<div>
  <div>
    <p>Hello world left side</p>
  </div>
</div>

<div>
  <div>
    <p>Hello world</p>
  </div>
  <div>
    <div></div>
  </div>
</div>

回答

渐变背景可以做到：

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

<div>
</div>

以上是外角圆形设计气球的全部内容。
THE END
分享
二维码
< <上一篇
下一篇>>
相关内容