如何制作对话泡泡？

Question

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

＆＃13;

＆＃13;

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);
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

创建一个语音气泡，如下所示

但伪元素有一些不透明的行。

我的问题是，

伪元素的

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>

Answer 2

正如其他人所说，SVG对于这种形状来说是一个很好的方法。您甚至可以使用code it inline path element。以下是您可以执行此操作的示例：

＆＃13;

＆＃13;

p{
  position:relative;
  width:200px;
  height:40px;
  padding: 30px 20px 10px;
  text-align:center;
  z-index:1;
}
svg{
  position:absolute;
  top:0; left:0;
  width:100%;
  height:100%;
  z-index:-1;
}

＆＃13;

<p class='speech'>
  <svg width="240" height="80" viewbox="-1 -1 242 82">
    <path d="M40 1 V20 H220 Q240 20 240 40 V60 Q240 80 220 80 H20 Q0 80 0 60 V40 Q0 20 20 20z" 
          fill="transparent" stroke="red" stroke-width="2" />
  </svg>
  Some error text message which is not covered by ::after
</p>

＆＃13;

＆＃13;

＆＃13;