gpt4 book ai didi

html - 如何创建对话泡泡?

转载 作者:搜寻专家 更新时间:2023-10-31 22:26:50 26 4
gpt4 key购买 nike

<分区>

此对话框用于显示表单验证的错误消息

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>

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

enter image description here

但是伪元素有一些线不能让它透明。

我的问题是,

    伪元素的
  1. lefttop 值显示负值。为什么伪元素不基于relative段落元素定位?以便 lefttop 被赋予正值?

  2. 为什么伪元素在after伪元素后不透明?

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com