J'ai attaché l'image afin qu'il soit plus clair à comprendre. J'ai besoin d'une flèche transparente dans la bulle de témoignage. Comment l'obtenir avec css?Comment faire des flèches de bulles transparentes sur fond d'image avec css?
Je crois que ce que vous cherchez est this le concept utilise les frontières, les couleurs & transparent. Dans certains cas, en utilisant ::before & ::after pseudos. Le lien ci-dessus a plus de détails.
body {
background-image: url('//www.gstatic.com/tv/thumb/tvbanners/12021482/p12021482_b_v8_ab.jpg');
background-position: top center;
background-size: cover;
}
.buble,
.buble-inner {
position: relative;
display: inline-block;
}
.buble:after,
.buble:before,
.buble-inner:after,
.buble-inner:before {
position: absolute;
display: block;
content: " ";
}
.buble-inner {
border-bottom: 1px solid #444;
color: #444;
padding: 20px;
border-radius: 10px;
}
.buble-inner:before {
top: 0;
left: 0;
width: 17px;
bottom: 0;
border-top: 1px solid #444;
border-left: 1px solid #444;
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
}
.buble-inner:after {
top: 0;
bottom: 0;
left: 33px;
right: 0;
border-top: 1px solid #444;
border-right: 1px solid #444;
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
}
.buble:before {
border-left: 1px solid #231f20;
border-top: 1px solid #231f20;
top: -5px;
left: 20px;
width: 10px;
height: 10px;
-ms-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
-o-transform: rotate(45deg);
-moz-transform: rotate(45deg);
transform: rotate(45deg);
}<div class="buble">
<div class="buble-inner">
this is message buble!
<br>you can put as much text in here as you want.
</div>
</div>Donc, fondamentalement, j'ai créé élément en position absolue (carré), qui tourne 45 degrés. Vous pouvez vibrer avec top, left, width, height pour obtenir la forme et la position désirées. J'ai utilisé le pseudo-sélecteur après (dans ce cas, peu importe si c'est :after ou :before, car l'élément est positionné de manière absolue)
Merci pour votre commentaire. Mais j'ai besoin de bulles transparentes entières à l'exception de la bordure afin que l'image de fond puisse voir. –
hmm hmmm hmm ... Je vais essayer quelque chose – AlFra
donc c'est aussi proche que je suis venu pour répondre à vos demandes. Vous devriez toujours jouer avec certaines propriétés pour obtenir ce que vous désirez. – AlFra
Je pense qu'il n'est pas possible d'avoir une flèche transparente dans CSS3. Du fait de tirer une flèche en utilisant les frontières doivent spécifier la couleur de l'arrière-plan, vous pouvez essayer ici: http://www.cssarrowplease.com/
Je ne sais pas si existe une autre aproche de le faire ...
Merci pour le lien. Je l'ai vérifié. Mais j'ai besoin de bulles avec un fond transparent à l'exception de la bordure blanche afin que l'image de fond de div entier puisse voir. –
Utilisez l'opacité sur la couleur d'arrière-plan. –