Css将渐变添加到元素+；之前

我正在用Css绘制一个工具提示框。 现在我想对包括三角形在内的整个长方体应用一个渐变。但梯度始终仅应用于长方体

我试着在after元素中加入渐变，但这也不起作用。我只想把三角形涂成一种颜色，但我需要能够把它移到其他地方

这不是一个重复的问题，因为在其他答案中，三角形只是在渐变的结束颜色中着色。但是我想梯度也适用于三角形

下面是一个例子：

正文{
背景色：番茄；
}
#泡泡{
位置：绝对位置；
顶部：50px；
左：50px；
宽度：154px；
高度：140像素；
填充：0px；
背景：#FFFFFF；
-webkit边界半径：6px；
-moz边界半径：6px；
边界半径：6px；
文本对齐：居中；
字号：1em；
字号：500；
背景：-webkit线性梯度（rgba（223204206，0.9）0%，rgba（242，144，127，1）100%）；
背景：-o-线性梯度（rgba（223204206，0.9）0%，rgba（242，144，127，1）100%）；
背景：线性梯度（rgba（223204206，0.9）0%，rgba（242，144，127，1）100%）；
/过滤器：progid:DXImageTransform.Microsoft.gradient（startColorstr='#e6dfccce'，endColorstr='#f2907f'，GradientType=0）；
}
#泡泡：之后{
内容：''；
位置：绝对位置；
边框样式：实心；
边框宽度：15px 16px 0px；
边框颜色：#FFFFFF透明；
显示：块；
宽度：0；
z指数：1；
底部：-15px；
左：59px；
}
#泡泡>：第一个孩子{
边缘顶端：19像素；
}
.回答者{
宽度：100%；
显示器：flex；
证明内容：之间的空间；
}
.answerWrapperText{
宽度：40px；
高度：38px；
颜色：#131313；
边框：实心2px#131313；
}
.answerWrapper>：第一个孩子{
利润率：0.18px；
}
.answerWrapper>：第n个孩子（2）{
边际：0.18px 0.0；
}
.AnswerWrapper文本p{
保证金：0；
边缘顶部：9px；
}

你有吗

明智地选择

是
否

所以我的解决方案是用画布绘制

var bubbleBackground；
函数initCanvas（）{
bubbleBackground=document.createElement（'canvas'）；
bubbleBackground.id=“BubbleId”；
bubbleBackground.width=184；
气泡背景高度=170；
bubbleBackground.style.position=“绝对”；
document.body.appendChild（bubbleBackground）；
}
函数drawCanvas（drawDirection）{
var ctx=document.getElementById（'BubbleId'）.getContext（“2d”）；
//画画前先清理画布
ctx.clearRect（0,0，bubbleBackground.width，bubbleBackground.height）；
//设置为正常绘图
ctx.globalCompositeOperation=“源代码结束”；
var-posX=15；
var-posY=15；
ctx.roundRect（posX，posY，154140，6）；
ctx.fillStyle='rgba（0,0,0,1）'；
ctx.fill（）；
开关（牵引方向）{
案例“顶部”：
ctx.beginPath（）；
ctx.moveTo（106,15）；
ctx.lineTo（78,15）；
ctx.lineTo（92,3）；
ctx.fill（）；
打破
案例“权利”：
ctx.beginPath（）；
ctx.moveTo（169,71）；
ctx.lineTo（181,85）；
ctx.lineTo（169,99）；
ctx.fill（）；
打破
案例“底部”：
ctx.beginPath（）；
ctx.moveTo（78155）；
ctx.lineTo（106155）；
ctx.lineTo（92167）；
ctx.fill（）；
打破
案例“左”：
ctx.beginPath（）；
ctx.moveTo（15,71）；
ctx.lineTo（15,99）；
ctx.lineTo（3,85）；
ctx.fill（）；
打破
违约：
console.log（“无箭头”）
} 
//绘制坡度
ctx.globalCompositeOperation=“来源于”；
var grd=ctx.createLinearGradient（0,0,0170）；
grd.addColorStop（0，'rgba（223204206,0.9'）；
grd.addColorStop（1，'rgba（242144127,1'）；
ctx.fillStyle=grd；
ctx.fillRect（0,0184170）；
}
CanvasRenderingContext2D.prototype.roundRect=函数（x、y、宽度、高度、半径）{
如果（宽度<2*半径）半径=宽度/2；
如果（高度<2*半径）半径=高度/2；
this.beginPath（）；
这个。移动到（x+半径，y）；
这个.arcTo（x+宽度，y，x+宽度，y+高度，半径）；
这个.arcTo（x+宽度，y+高度，x，y+高度，半径）；
这个.arcTo（x，y+高度，x，y，半径）；
这个.arcTo（x，y，x+宽度，y，半径）；
这个.closePath（）；
归还这个；
}
initCanvas（）；
帆布（“右”）所以我的解决方案是用画布绘制



var bubbleBackground；
函数initCanvas（）{
bubbleBackground=document.createElement（'canvas'）；
bubbleBackground.id=“BubbleId”；
bubbleBackground.width=184；
气泡背景高度=170；
bubbleBackground.style.position=“绝对”；
document.body.appendChild（bubbleBackground）；
}
函数drawCanvas（drawDirection）{
var ctx=document.getElementById（'BubbleId'）.getContext（“2d”）；
//画画前先清理画布
ctx.clearRect（0,0，bubbleBackground.width，bubbleBackground.height）；
//设置为正常绘图
ctx.globalCompositeOperation=“源代码结束”；
var-posX=15；
var-posY=15；
ctx.roundRect（posX，posY，154140，6）；
ctx.fillStyle='rgba（0,0,0,1）'；
ctx.fill（）；
开关（牵引方向）{
案例“顶部”：
ctx.beginPath（）；
ctx.moveTo（106,15）；
ctx.lineTo（78,15）；
ctx.lineTo（92,3）；
ctx.fill（）；
打破
案例“权利”：
ctx.beginPath（）；
ctx.moveTo（169,71）；
ctx.lineTo（181,85）；
ctx.lineTo（169,99）；
ctx.fill（）；
打破
案例“底部”：
ctx.beginPath（）；
ctx.moveTo（78155）；
ctx.lineTo（106155）；
ctx.lineTo（92167）；
ctx.fill（）；
打破
案例“左”：
ctx.beginPath（）；
ctx.moveTo（15,71）；
ctx.lineTo（15,99）；
ctx.lineTo（3,85）；
ctx.fill（）；
打破
违约：
console.log（“无箭头”）
} 
//绘制坡度
ctx.globalCompositeOperation=“来源于”；
var grd=ctx.createLinearGradient（0,0,0170）；
grd.addColorStop（0，'rgba（223204206,0.9'）；
grd.addColorStop（1，'rgba（242144127,1'）；
ctx.fillStyle=grd；
ctx.fillRect（0,0184170）；
}
CanvasRenderingContext2D.pr
#bubble:after {
  content: '';
  position: absolute;
  /* border-style: solid; */
  /* border-width: 15px 16px 0px; */
  /* border-color: #FFFFFF transparent; */
  display: block;
  width: 0;
  z-index: 1;
  bottom: -10px;
  left: 0;
  right: 0;
  margin: auto;
  width: 20px;
  height: 20px;
  /* background: red; */
  transform: rotate(45deg);
  z-index: -1;
  background: linear-gradient(130deg, rgba(223, 204, 206, 0.9) 0%, rgba(242, 144, 127, 1) 50%);
}