纯css对话

如何在以下代码中透明“红色”背景

---

由于我想在body中使用背景图像，我必须隐藏红色背景

不要使用两个伪元素来创建卷曲，使用一个带有径向渐变的元素

正文{
字体系列：“Helvetica Neue”；
字体大小：20px；
字体大小：正常；
背景图像：url（“https://storage.googleapis.com/gweb-uniblog-publish-prod/images/Background.2e16d0ba.fill-1422x800.jpg");
}
部分{
最大宽度：450像素；
保证金：50px自动；
}
分区{
最大宽度：255px；
单词包装：打断单词；
边缘底部：20px；
线高：24px；
}
.清楚{
明确：两者皆有；
}
.从我这里{
位置：相对位置；
填充：10px 20px；
颜色：白色；
背景：#0B93F6；
边界半径：25px 25px 0 25px；
浮动：对；
}
.我说：以前{
内容：“；
位置：绝对位置；
z指数：-1；
宽度：14px；
高度：14px；
背景：径向梯度（右上角的圆圈，rgba（0,0,0,0）0%，rgba（0,0,0,0）14px，#0b93f6 14px）；
底部：0；
左：100%；
}

嘿！怎么了

不要使用两个伪元素创建卷曲，使用一个具有径向渐变的伪元素

正文{
字体系列：“Helvetica Neue”；
字体大小：20px；
字体大小：正常；
背景图像：url（“https://storage.googleapis.com/gweb-uniblog-publish-prod/images/Background.2e16d0ba.fill-1422x800.jpg");
}
部分{
最大宽度：450像素；
保证金：50px自动；
}
分区{
最大宽度：255px；
单词包装：打断单词；
边缘底部：20px；
线高：24px；
}
.清楚{
明确：两者皆有；
}
.从我这里{
位置：相对位置；
填充：10px 20px；
颜色：白色；
背景：#0B93F6；
边界半径：25px 25px 0 25px；
浮动：对；
}
.我说：以前{
内容：“；
位置：绝对位置；
z指数：-1；
宽度：14px；
高度：14px；
背景：径向梯度（右上角的圆圈，rgba（0,0,0,0）0%，rgba（0,0,0,0）14px，#0b93f6 14px）；
底部：0；
左：100%；
}

嘿！怎么了

这是解决问题的另一种方法。我用另一种方式创建了自定义形状，而不是从蓝色框中删除某些部分。我希望你正在努力实现这样的目标

.square{
宽度：100px；
高度：100px；
溢出：隐藏；
位置：相对位置；
浮动：左
}
.轮{
宽度：200px；
高度：200px；
边框：实心100px红色；
位置：绝对位置；
底部：-100px；
左：-100px；
边界半径：50%；
}

---

这是解决问题的另一种方法。我用另一种方式创建了自定义形状，而不是从蓝色框中删除某些部分。我希望你正在努力实现这样的目标

.square{
宽度：100px；
高度：100px；
溢出：隐藏；
位置：相对位置；
浮动：左
}
.轮{
宽度：200px；
高度：200px；
边框：实心100px红色；
位置：绝对位置；
底部：-100px；
左：-100px；
边界半径：50%；
}

.from-me {
    position:relative;
    padding:10px 20px;
    color:white; 
    background:#0B93F6;
    border-radius:25px 25px 0 25px;
    float: right;

    &:before {
        content:"";
        position:absolute;
        z-index:-1;
        bottom:-2px;
        right:-7px;
        height:20px;
        border-right:20px solid #0B93F6;
        border-bottom-left-radius: 16px 14px;
        -webkit-transform:translate(0, -2px);
    }

    &:after {
        content:"";
        position:absolute;
        z-index:1;
        bottom:-2px;
        right:-56px;
        width:26px;
        height:20px;
        background:red;
        border-bottom-left-radius: 10px;
        -webkit-transform:translate(-30px, -2px);
    }
}