如何使一个弯曲的三角形气泡与伪元素？ [英] How to make a curved triangle speech bubble with pseudo-elements?

问题描述

大家好，我试图用CSS :: after 伪元素制作一个弯曲的三角形语音泡泡。

我创建了 DEMO

：

  .test 
 {
 position：relative; 
 width：430px; 
 height：175px; 
 padding：0px; 
 background：#FFFFFF; 
 -webkit-border-radius：6px; 
 -moz-border-radius：6px; 
 border-radius：6px; 
} 
 
 .test：after 
 {
 content：''; 
 position：absolute; 
 border-style：solid; 
 border-width：14px 14px 0; 
 border-color：#FFFFFF transparent; 
 display：block; 
 width：0; 
 z-index：1; 
 bottom：-14px; 
 left：8px; 
} 
  

如何做图片？

解决方案

您可以使用伪元素（及其诡计）来生成类似 的内容：

---

  div {height：200px; width：350px;背景：番茄; margin：50px;位置：相对; display：inline-block;} div：before {content：; position：absolute; height：40px; width：40px;背景：番茄;底部：2％; left：-15px; border-radius：0 0 100％0; -webkit-transform：rotate（35deg）; transform：rotate（35deg）;} div：after {content：; position：absolute; height：40px; width：10px;背景：白色;底部：7％; left：-18px; border-radius：50％; -webkit-transform：rotate（35deg）; transform：rotate（35deg）;}  

 < div& Hello world< / div>  

---

  .test {height：200px; width：350px;背景：番茄; border-radius：5px;位置：相对; margin：20px;}。test：before {content：; position：absolute; height：20px; width：20px;背景：番茄; bottom：20px; left：-6px; transform-origin：center center; transform：rotate（30deg）; border-radius：0 0 100％0;}。test：after {content：; position：absolute; height：20px; width：10px;背景：白色; bottom：24px; left：-11px; border-radius：50％; transform-origin：center center; transform：rotate（30deg）;}。zoom {margin：0 auto; height：200px; width：200px;背景：红色;位置：相对; edge-radius：0 0 100％0; transform-origin：center center; transform：rotate（45deg）; margin-top：50px;}。zoom：before {content：; position：absolute;高度：100％; width：50％;背景：白色; border-radius：50％;左：-25％; top：0;}  

 < div class = > hello world< / div>< hr />< div class =zoom>< / div>  
 
 
 
 
 
 
 
 
Hi everyone I am trying to make a curved triangle speech bubble with the CSS ::after pseudo-element.

I have created like this  DEMO:
.test 
{
position: relative;
width: 430px;
height: 175px;
padding: 0px;
background: #FFFFFF;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
}

.test:after 
{
content: '';
position: absolute;
border-style: solid;
border-width: 14px 14px 0;
border-color: #FFFFFF transparent;
display: block;
width: 0;
z-index: 1;
bottom: -14px;
left: 8px;
}
How do I do like the picture?

解决方案
you could use pseudo elements (and their trickery) to generate something similar to this: 





div {
  height: 200px;
  width: 350px;
  background: tomato;
  margin: 50px;
  position: relative;
  display: inline-block;
}
div:before {
  content: "";
  position: absolute;
  height: 40px;
  width: 40px;
  background: tomato;
  bottom: 2%;
  left: -15px;
  border-radius: 0 0 100% 0;
  -webkit-transform: rotate(35deg);
  transform: rotate(35deg);
}
div:after {
  content: "";
  position: absolute;
  height: 40px;
  width: 10px;
  background: white;
  bottom: 7%;
  left: -18px;
  border-radius: 50%;
  -webkit-transform: rotate(35deg);
  transform: rotate(35deg);
}

<div>Hello world</div>









.test {
  height: 200px;
  width: 350px;
  background: tomato;
  border-radius: 5px;
  position: relative;
  margin: 20px;
}
.test:before {
  content: "";
  position: absolute;
  height: 20px;
  width: 20px;
  background: tomato;
  bottom: 20px;
  left: -6px;
  transform-origin: center center;
  transform: rotate(30deg);
    border-radius: 0 0 100% 0;
}
.test:after {
  content: "";
  position: absolute;
  height: 20px;
  width: 10px;
  background: white;
  bottom: 24px;
  left: -11px;
  border-radius: 50%;
  transform-origin: center center;
  transform: rotate(30deg);
}
.zoom {
  margin: 0 auto;
  height: 200px;
  width: 200px;
  background: red;
  position: relative;
  border-radius: 0 0 100% 0;
  transform-origin:center center;
  transform: rotate(45deg);
  margin-top:50px;
}
.zoom:before {
  content: "";
  position: absolute;
  height: 100%;
  width: 50%;
  background: white;
  border-radius: 50%;
  left: -25%; top: 0;
}

<div class="test">hello world</div>

<hr/>

<div class="zoom"></div>







tested in Chrome, IE and Firefox (latest versions) 

                        
这篇关于如何使一个弯曲的三角形气泡与伪元素？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！