在 css 中创建具有特定形状的对话泡泡时，设置之后的透明度

Question

我正在尝试使用 css 实现上述对话泡泡形状。正文背景渐变时，透明度应该怎么设置？

将after的背景设置为透明时，指定为before的背景。如果是这样，我是否应该更改前后的顺序来执行它？求助！

.body {
        padding: 30px 0 20px 0 !important;
        background: linear-gradient(to right, #E51D38,#C90E97);
    }

    .speech-bubble {
        text-align: center;
        width: 50%;
        position: relative;
        padding: 50px;
        margin: 1em auto 50px;
        text-align: center;
        color: black;
        background: white;
        border-radius: 30px;
    }

    .speech-bubble:before {
        content: "";
        position: absolute;
        z-index: 3;
        left: -22px;
        top: 0;
        width: 40px;
        border-bottom: 35px solid white;
        border-top-right-radius: 25px;
    }

    .speech-bubble:after {
        content: "";
        position: absolute;
        z-index:3;
        left: -28px;
        top: -3px;
        height: 38px;
        width: 28px;
        background: lightgray;
        border-top-right-radius: 20px;
    }

<div class="speech-bubble">Hello, world.</div>

Answer 1

使用渐变着色然后简单地控制元素的width/height:

body {
  padding: 30px 0 20px 0 !important;
  background: linear-gradient(to right, #E51D38, #C90E97);
}

.speech-bubble {
  text-align: center;
  width: 50%;
  position: relative;
  padding: 50px;
  margin: 1em auto 50px;
  text-align: center;
  color: black;
  background: white;
  border-radius: 30px;
}

.speech-bubble:before {
  content: "";
  position: absolute;
  width:50px;
  height:40px;
  top:0;
  left:-25px;
  background: radial-gradient(50% 100% at bottom left,#0000 98%,white);
  border-top-right-radius: 100%;
}

<div class="speech-bubble">Hello, world.</div>

在 css 中创建具有特定形状的对话泡泡时，设置之后的透明度

When creating a speech bubble with a specific shape in css, set the transparency after

html

css

background