如何创建讲话泡泡？

Question

此语音气泡用于在表单验证时显示错误消息

p.speech {
  position: relative;
  width: 200px;
  height: 40px;
  left: 100px;
  top: 100px;
  background-color: #FFFFFF;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
  text-align: center;
  border: 1px solid red;
}
p.speech::before {
  content: ' ';
  position: absolute;
  width: 0;
  height: 0;
  left: -10px;
  top: -10px;
  border: 20px solid;
  border-color: #FF0000 transparent transparent transparent;
  -webkit-transform: rotate(25deg);
  -moz-transform: rotate(25deg);
  transform: rotate(25deg);
}
p.speech::after {
  content: ' ';
  position: absolute;
  width: 0;
  height: 0;
  left: -9px;
  top: -9px;
  border: 19px solid;
  border-color: #FFFFFF transparent transparent transparent;
  -webkit-transform: rotate(25deg);
  -moz-transform: rotate(25deg);
  transform: rotate(25deg);
}

<p class="speech">here is a text</p>

创建一个讲话泡泡,如下所示,

但是伪元素有一些不透明的线条.

我的问题是,

1. left和top伪元素的值显示负值.为什么伪元素不是基于relative段落元素定位的？这样,left并top给予正值？

2. 为什么伪元素不会因伪元素变得透明after？

Answer 1

您可以通过创建一个在两侧带有边框的单个元素,然后将此元素倾斜以创建箭头而不是直角来实现此目的.另请注意稍宽(sqrt(2)为准确)的顶部边框,因为这个边缘因倾斜而变得更薄.绝对定位也经过调整,以使边界排成一行.

另请注意,您应将消息本身放在元素中,并确保它位于箭头前面.

注意事项:边框尺寸较粗,很明显箭头的右角有一个过冲进入气泡.正如其他人指出的那样,用一点SVG很容易实现这一点,这不会有这个问题.

p.speech {
  position: relative;
  width: 200px;
  height: 40px;
  left: 100px;
  top: 100px;
  background-color: #FFFFFF;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
  text-align: center;
  border: 1px solid red;
}

p.speech::after {
  content: ' ';
  position: absolute;
  width: 20px;
  height: 20px;
  left: 20px;
  top: -11px;
  background: white;
  border-left: 1px solid red;
  border-top: 1.4px solid red;
  -webkit-transform: skew(0, 45deg);
  -moz-transform: skew(0, 45deg);
  transform: skew(0, 45deg);
}

p.speech span {
  position: relative;
  z-index: 1;
}

<p class='speech'>
  <span>Some error text message which is not covered by ::after</span>
</p>