HNL Asked: 2020-02-13 13:04:29 +0800 CST 2020-02-13 13:04:29 +0800 CST 2020-02-13 13:04:29 +0800 CST 带有 CSS 的卡通气球? 772 我正在寻找一个带有 CSS 的漫画气球,即一个带有文本和漫画风格的“尾巴”的对话框气球。解决方案尽可能寻求气球的“尾巴”具有圆形外观,如图所示: 我找到了一种我作为答案发布的方法。但是您如何改进提议的卡通气球的设计呢? css 3 Answers Voted Best Answer Edgar Gutiérrez 2020-02-13T14:08:31+08:002020-02-13T14:08:31+08:00 我给你一个方法,使用伪元素::before。 在 html 中,我会使用这个结构: <div class="vineta"> <p class="globo"></p> </div> 在容器 div 的 css 中,我们将使用它作为参考,将气球定位在盒子的某些坐标中。 .vineta{ position:relative; width: 100%; max-width: 600px; height: 100vh; max-height: 600px; /*Opcionalmente con box-shadow, creamos varias sombras, para simular un marco*/ box-shadow: 0 0 0 1px black, 0 0 0 6px white, 0 0 0 7px black; } 现在会出现气球,我们绝对定位它和一些测量值(无论你想要什么),唯一奇怪的是我用它filter来生成阴影,但是因为这与属性生成它的方式有点不同box-shadow,你会看看为什么。 globo{ position: absolute; width: 200px; height: 150px; top: 20px; left: 80px; border-radius: 2em; z-index: 1; background-color: white; filter: drop-shadow(0px 0px 1px black) ; } 创建气球后,我们将创建“尾巴”,我使用 来执行此操作::before,我们创建一个空内容并参考气球定位它。在这里,我们必须根据它的尺寸来容纳它,就像这样: Ancho: Xpx; Alto: =(Ancho); 取决于我们将如何定位它,无论是向上还是向下、向左还是向右,我们是否使用 and 中的坐标X,Y就像这样: .globo::before{ content: ''; /*o vacío, propiedad necesaria*/ } .ejemplo-abajo-derecha::before{ left: 50%; /*o lo que consideres*/ bottom: (Ancho) / 2; /*O la mitad del ancho*/ } .ejemplo-izquierda-arriba::before{ top: 50%; /*o lo que consideres*/ left: (Ancho) / 2; /*O la mitad del ancho*/ } 要添加三角形效果,我更喜欢使用 transform: skew(xdegrees) 来实现,如下所示: .globo::before{ content: ''; transform: skew(45deg); } *, *::before{box-sizing: border-box;} .vineta{ position:relative; width: 100%; max-width: 600px; height: 90vh; max-height: 600px; /*Opcionalmente con box-shadow, creamos varias sombras, para simular un marco*/ box-shadow: 0 0 0 1px black, 0 0 0 6px white, 0 0 0 7px black; } .globo{ position: absolute; width: 200px; height: 150px; top: 20px; left: 80px; padding: 1.5em; border-radius: 2em; font-family: sans-serif; z-index: 1; background-color: white; filter: drop-shadow(0px 0px 1px black) ; } .globo::before{ content: ''; position: absolute; z-index: -1; width: 10px; height: 10px; left: -5px; top: 50px; background-color: white; transform: skewX(45deg); } <div class="vineta"> <p class="globo">contenido</p> </div> 我使用阴影的原因是因为它覆盖了容器以及从阴影中突出的东西,无论形状如何,而且如果突出的元素没有背景颜色或边框,这些都没有考虑在内影子,一个例子: .sombra{ padding: 1em; display: inline-block; margin: 10vh; background-color: whitesmoke; position: relative; } .sombra::before{ content: ''; position: absolute; display: block; left: 90%; top: 10%; width: 30px; height: 30%; border: 10px whitesmoke solid; border-top: none; border-radius: 10px; } .drop{ filter: drop-shadow(0 0 2px black) } .sombra{ box-shadow: 0 0 2px black; } <div class="sombra drop">sombra drop</div> <div class="sombra normal">sombra normal</div> 更新 现在,您可以使一切变得更加动态,使用custom properties, 根据尾巴的宽度自动计算其他测量值。 我还发现了如何实现曲线,只需结合 box-shadow 和 border-radius 的属性,请参阅: *, *::before{box-sizing: border-box;} .vineta{ position:relative; width: 100%; max-width: 600px; height: calc(100vh - 30px); max-height: 600px; /*Opcionalmente con box-shadow, creamos varias sombras, para simular un marco*/ box-shadow: 0 0 0 1px black, 0 0 0 6px white, 0 0 0 7px black; } .globo{ position: absolute; text-transform: uppercase; font-size: 12px; border-radius: var(--borde); padding: var(--borde); --borde: 1em; font-family: sans-serif; z-index: 1; background-color: white; filter: drop-shadow(0px 0px 1px black) ; } .globo.i{ width: 150px; top: 20px; left: 80px; } .globo.ii{ width: 150px; top: 100px; left: 20px; } .globo.iii{ width: 150px; top: 60px; right: 10px; } .globo.iv{ width: 150px; bottom: 10px; left: 40%; } .globo::before{ content: ''; position: absolute; z-index: -1; width: var(--colita); height: var(--colita); } .globo.abajo-derecha::before{ --colita: 20px; left: 50%; bottom: calc( var(--colita) / -1.5); transform: skewY(30deg) rotateZ(-30deg); border-radius: 0 0 0 10em; box-shadow: inset calc(var(--colita)/2) calc(var(--colita)/3) 0 0 white; } .globo.derecha-arriba::before{ --colita: 20px; top: 10px; right: calc( var(--colita) / -1.5); transform: skewY(30deg) rotateZ(-120deg); border-radius: 0 0 0 10em; box-shadow: inset calc(var(--colita)/2) calc(var(--colita)/3) 0 0 white; } .globo.abajo-izquierda::before{ --colita: 50px; left: 10px; bottom: calc( var(--colita) / -1.5); border-radius: 0 0 10em 0; box-shadow: inset calc(var(--colita)/-3) calc(var(--colita)/4) 0 0 white; } .globo.izquierda-arriba::before{ --colita: 20px; top: 0; left: calc( var(--colita) / -1.5); transform: rotateZ(-60deg); border-radius: 10em 0 0 0; color: white; box-shadow: inset calc(var(--colita)/3) calc(var(--colita)/-4) 0 0; } .globo.yellow::before{ background-color: rgba(255,255,0,.8); color: rgba(255,2,0,.5); animation: cambio-color ease 5s infinite both; } @keyframes cambio-color{ 45%,55% { background-color: rgba(255,255,255,0); color: white; } } <div class="vineta"> <p class="globo i abajo-derecha"> abajo-derecha </p> <p class="globo ii derecha-arriba"> derecha-arriba </p> <p class="globo iii abajo-izquierda"> abajo-izquierda </p> <p class="globo iv izquierda-arriba yellow"> izquierda-arriba yellow </p> </div> Francisco Romero 2020-02-13T14:15:39+08:002020-02-13T14:15:39+08:00 你真的不需要那么多元素来制作小插图标签。:before对你来说,在你有子弹的 div 上使用伪元素就足够了。 在这种情况下,为了模拟三角形,我使用了边距,因为使用width: 0和height: 0每个边距往往会形成一个三角形,我们做得越大。 最后,要将 div 内的文本垂直和水平居中,您可以flexbox使用该属性将其垂直居中align-items: center,因为它是文本,您可以使用text-align: center;. 注意:我曾经transform: rotate()根据气球的角给它一个坡度。 例子: #historieta{ display: flex; text-align: center; align-items: center; position: relative; top: 40px; width: 120px; height: 80px; background-color: blue; border-radius: 25px; } #historieta:before{ content: ""; position: absolute; top: 65px; left: 95px; width: 0px; height: 0px; border-top: 20px solid blue; border-right: 20px solid transparent; border-left: 20px solid transparent; transform: rotate(75deg); } <div id="historieta"> <span>Esto es una prueba</span> </div> HNL 2020-02-13T13:05:11+08:002020-02-13T13:05:11+08:00 我将我的解决方案留在这里作为答案,但我想知道您将如何做到这一点,尤其是使用地球的 Delta(尾巴),因为在这种情况下,我必须使用多个 Div 才能创建它...... .globo-historieta-container { position: relative; width: 250px; height: 150px; margin: 0 auto; } .globo-historieta { position: relative; width: 250px; height: 150px; background-color: darkblue; color: white; border-radius: 75px; text-align: center; padding: 60px 0px 0px 0px; } .globo-historieta-dialogo { position: absolute; bottom: 5px; right: 5px; content: ''; width: 0; height: 0; border-top: 60px solid transparent; border-right: 60px solid darkblue; font-size: 0px; border-bottom-left-radius: 60px; } .border-rigth { position: absolute; bottom: -6px; right: -42px; width: 60px; height: 60px; background-color: white; border-bottom-left-radius: 40px; } <!-- PRUEBAS FORMAS --> <div class="container"> <!-- GLOBO DE HISTORIETA --> <div class="row"> <div class="globo-historieta-container"> <div class="globo-historieta-dialogo"></div> <div class="border-rigth"></div> <div class="globo-historieta"> <span>Esta es una historieta</span> </div> </div> </div> </div>
我给你一个方法,使用伪元素
::before
。在 html 中,我会使用这个结构:
在容器 div 的 css 中,我们将使用它作为参考,将气球定位在盒子的某些坐标中。
现在会出现气球,我们绝对定位它和一些测量值(无论你想要什么),唯一奇怪的是我用它
filter
来生成阴影,但是因为这与属性生成它的方式有点不同box-shadow
,你会看看为什么。创建气球后,我们将创建“尾巴”,我使用 来执行此操作
::before
,我们创建一个空内容并参考气球定位它。在这里,我们必须根据它的尺寸来容纳它,就像这样:取决于我们将如何定位它,无论是向上还是向下、向左还是向右,我们是否使用 and 中的坐标
X
,Y
就像这样:要添加三角形效果,我更喜欢使用 transform: skew(xdegrees) 来实现,如下所示:
我使用阴影的原因是因为它覆盖了容器以及从阴影中突出的东西,无论形状如何,而且如果突出的元素没有背景颜色或边框,这些都没有考虑在内影子,一个例子:
更新
现在,您可以使一切变得更加动态,使用
custom properties
, 根据尾巴的宽度自动计算其他测量值。我还发现了如何实现曲线,只需结合 box-shadow 和 border-radius 的属性,请参阅:
你真的不需要那么多元素来制作小插图标签。
:before
对你来说,在你有子弹的 div 上使用伪元素就足够了。在这种情况下,为了模拟三角形,我使用了边距,因为使用
width: 0
和height: 0
每个边距往往会形成一个三角形,我们做得越大。最后,要将 div 内的文本垂直和水平居中,您可以
flexbox
使用该属性将其垂直居中align-items: center
,因为它是文本,您可以使用text-align: center;
.注意:我曾经
transform: rotate()
根据气球的角给它一个坡度。例子:
我将我的解决方案留在这里作为答案,但我想知道您将如何做到这一点,尤其是使用地球的 Delta(尾巴),因为在这种情况下,我必须使用多个 Div 才能创建它......