Trying to create a "chat bubble" type of thing and here is my code. The little triangle is made via a pseudo element ::after but I can't make it show.
Any ideas what I am doing wrong?
.playernamechat.self-message {
width: auto;
background-color: blue;
border-radius: 12px;
padding: 5px 10px;
margin-left: 5px;
display: inline-block;
max-width: 280px;
overflow: hidden;
float: left;
position: relative;
color: white;
}
.self-message::after {
content: "";
position: absolute;
top: 50%;
right: 100%;
margin-top: -5px;
border-width: 5px;
border-style: solid;
border-color: #555 transparent transparent transparent;
}
<span class="playernamechat self-message">hello</span>
Actually, it is showing but hidden. In your CSS remove overflow: hidden;. See below:
.playernamechat.self-message {
width: auto;
background-color: blue;
border-radius: 12px;
padding: 5px 10px;
margin-left: 5px;
display: inline-block;
max-width: 280px;
/*overflow: hidden;*/
float: left;
position: relative;
color: white;
}
.self-message::after {
content: "";
position: absolute;
top: 50%;
right: 100%;
margin-top: -5px;
border-width: 5px;
border-style: solid;
border-color: #555 transparent transparent transparent;
}
<span class="playernamechat self-message">hello</span>
Related
I want to create a shape using CSS. The only problem I am facing is the alignment of semicircle with the border of rectangle which is not working out properly.
I am attaching the image of what I have done till now. Can anybody help me out to fix these alignment problem. Thank you.
body {
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background-color: white;
}
#talkbubble {
width: 120px;
height: 80px;
border: 4px solid #4C4C4C;
position: relative;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
}
#talkbubble:before {
content: "";
position: absolute;
top: 42%;
left: -11.6px;
width: 30px;
height: 15px;
border: 4px solid #4C4C4C;
border-bottom: none;
border-top-left-radius: 30px;
border-top-right-radius: 30px;
background-color: white;
transform: rotate(90deg);
box-sizing: border-box;
}
#talkbubble:after {
content: "";
position: absolute;
top: 42%;
right: -12px;
width: 30px;
height: 15px;
border: 4px solid #4C4C4C;
border-bottom: none;
border-top-left-radius: 30px;
border-top-right-radius: 30px;
background-color: white;
transform: rotate(270deg);
box-sizing: border-box;
}
<div id="talkbubble"></div>
I would do it differently with one element:
.ticket {
width:300px;
height:200px;
border-radius:20px;
border:8px solid;
background:
radial-gradient(circle 38px at right,#000 95%,#0000),
radial-gradient(circle 38px at left ,#000 95%,#0000);
background-origin:border-box;
-webkit-mask:
radial-gradient(circle 30px at right,#0000 95%,#000) right,
radial-gradient(circle 30px at left ,#0000 95%,#000) left;
-webkit-mask-size:51% 100%;
-webkit-mask-repeat:no-repeat;
}
<div class="ticket"></div>
You could add overflow hidden in case, and a full circle?
.ticket-outer {
overflow: hidden;
height: 150px;
width: 300px;
margin: 50px auto;
}
.ticket {
border: 5px solid #000;
border-radius: 20px;
height: 150px;
width: 300px;
position: relative;
box-sizing: border-box;
}
.ticket::before,
.ticket::after {
content: '';
width: 50px;
height: 50px;
border: 5px solid #000;
background: #fff;
border-radius: 50%;
position: absolute;
top: 50%;
left: -30px;
transform: translateY(-50%);
z-index: 2;
}
.ticket::after {
left: auto;
right: -30px;
}
<div class="ticket-outer">
<div class="ticket"></div>
</div>
I want to create a shape using CSS. The only problem I am facing is the alignment of semicircle with the border of rectangle which is not working out properly.
I am attaching the image of what I have done till now. Can anybody help me out to fix these alignment problem. Thank you.
body {
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background-color: white;
}
#talkbubble {
width: 120px;
height: 80px;
border: 4px solid #4C4C4C;
position: relative;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
}
#talkbubble:before {
content: "";
position: absolute;
top: 42%;
left: -11.6px;
width: 30px;
height: 15px;
border: 4px solid #4C4C4C;
border-bottom: none;
border-top-left-radius: 30px;
border-top-right-radius: 30px;
background-color: white;
transform: rotate(90deg);
box-sizing: border-box;
}
#talkbubble:after {
content: "";
position: absolute;
top: 42%;
right: -12px;
width: 30px;
height: 15px;
border: 4px solid #4C4C4C;
border-bottom: none;
border-top-left-radius: 30px;
border-top-right-radius: 30px;
background-color: white;
transform: rotate(270deg);
box-sizing: border-box;
}
<div id="talkbubble"></div>
I would do it differently with one element:
.ticket {
width:300px;
height:200px;
border-radius:20px;
border:8px solid;
background:
radial-gradient(circle 38px at right,#000 95%,#0000),
radial-gradient(circle 38px at left ,#000 95%,#0000);
background-origin:border-box;
-webkit-mask:
radial-gradient(circle 30px at right,#0000 95%,#000) right,
radial-gradient(circle 30px at left ,#0000 95%,#000) left;
-webkit-mask-size:51% 100%;
-webkit-mask-repeat:no-repeat;
}
<div class="ticket"></div>
You could add overflow hidden in case, and a full circle?
.ticket-outer {
overflow: hidden;
height: 150px;
width: 300px;
margin: 50px auto;
}
.ticket {
border: 5px solid #000;
border-radius: 20px;
height: 150px;
width: 300px;
position: relative;
box-sizing: border-box;
}
.ticket::before,
.ticket::after {
content: '';
width: 50px;
height: 50px;
border: 5px solid #000;
background: #fff;
border-radius: 50%;
position: absolute;
top: 50%;
left: -30px;
transform: translateY(-50%);
z-index: 2;
}
.ticket::after {
left: auto;
right: -30px;
}
<div class="ticket-outer">
<div class="ticket"></div>
</div>
I created a simple div for my comments section.
I would like to give it the appearance of a speech bubble by having a triangle on the left or any other effect that would make it look like a speech bubble coming from the left.
How can I achieve that without using an image ?
image
html
<div class='comment'></div>
css
.comment {
margin-left: 10px;
height: 80px;
display: inline-block;
color: white;
width: 400px;
border: 1px solid white;
padding: 10px;
border-radius: 5px;
overflow: hidden;
}
Try this
.comment {
margin-left: 10px;
height: 80px;
display: inline-block;
color: white;
width: 400px;
border: 1px solid white;
padding: 10px;
border-radius: 5px;
position: relative;
background-color: #fff;
border:1px solid #000;
}
.comment::before{
content:"";
position: absolute;
top:20px;
left:-12px;
margin:auto;
height: 20px;
width: 20px;
border:1px solid #fff;
transform:rotate(45deg);
background-color: #fff;
border-bottom:1px solid #000;
border-left:1px solid #000;
}
<div class='comment'></div>
style accordingly,
hope this helps...
I hope to help you:
.comment {
position: relative;
margin-left: 50px;
margin-top: 50px;
height: 50px;
display: inline-block;
width: 200px;
padding: 10px;
border-radius: 5px;
background: skyblue;
color: #FFF;
}
.comment:before, .comment:after {
content: '';
border-radius: 100%;
position: absolute;
width: 50px;
height: 50px;
z-index: -1;
}
.comment:after {
background-color: #fff;
bottom: -30px;
left: 55px;
}
.comment:before {
background-color: skyblue;
bottom: -20px;
left: 70px;
}
<div class='comment'>Hello,World!</div>
I like Nicholas Gallagher's work best, see his demo page.
This is lifted off his page and is not my own work.
<style>
/* Bubble with an isoceles triangle
------------------------------------------ */
.triangle-isosceles {
position: relative;
padding: 15px;
margin: 1em 0 3em;
color: #000;
background: #f3961c;
border-radius: 10px;
background:linear-gradient(#f9d835, #f3961c);
}
/* creates triangle */
.triangle-isosceles:after {
content: "";
display: block; /* reduce the damage in FF3.0 */
position: absolute;
bottom: -15px;
left: 50px;
width: 0;
border-width: 15px 15px 0;
border-style: solid;
border-color: #f3961c transparent;
}
</style>
<p class="triangle-isosceles">This is a quote. Hello world. text goes here.</p>
I am trying to draw a line with a small arrow pointing down as in the image attached.
I was able to get it working on fiddle using before and after psuedo tags ( with help from Stack overflow).
<hr class="line">
http://jsfiddle.net/4eL39sm1/6/
But I now need it in a div tag like this
<div class="hr"></div>
I have edited my css accordingly
div.hr{
width:70%;
}
div.hr:after {
content:'';
position: absolute;
border-style: solid;
border-width: 15px 15px 0;
border-color: #FFFFFF transparent;
display: block;
width: 0;
z-index: 1;
top: 8px;
left: 45%;
}
div.hr:before {
content:'';
position: absolute;
border-style: solid;
border-width: 15px 15px 0;
border-color: #7F7F7F transparent;
display: block;
width: 0;
z-index: 1;
top: 9px;
left: 45%;
}
I made these 2 observations:
The arrow part looks a solid triangle.
The arrow (triangle was mispalced was up in the top). I removed the top value form css and it aligned well but it still looks like a triangle.
Is there a way I can fix this?
Thanks.
You can modify to this:
div.hr {
width:70%;
height: 1px;
background: #7F7F7F;
}
div.hr:after {
content:'';
position: absolute;
border-style: solid;
border-width: 15px 15px 0;
border-color: #FFFFFF transparent;
display: block;
width: 0;
z-index: 1;
top: 8px;
left: 35%;
}
div.hr:before {
content:'';
position: absolute;
border-style: solid;
border-width: 15px 15px 0;
border-color: #7F7F7F transparent;
display: block;
width: 0;
z-index: 1;
top: 9px;
left: 35%;
}
<div class="hr"></div>
As you can see you don't have to remove top from pseudo-elements. The only thing you have to add is height: 1px and background color same as the second triangle.
Also if you wan to use it inside another element for example and align to center you can use this:
div.hr {
width:70%;
height: 1px;
background: #7F7F7F;
position: relative;
margin: 0 auto;
}
div.hr:after {
content:'';
position: absolute;
border-style: solid;
border-width: 15px 15px 0;
border-color: #FFFFFF transparent;
display: block;
width: 0;
z-index: 1;
left: 50%;
}
div.hr:before {
content:'';
position: absolute;
border-style: solid;
border-width: 15px 15px 0;
border-color: #7F7F7F transparent;
display: block;
width: 0;
z-index: 1;
left: 50%;
}
<div>
<div class="hr"></div>
</div>
p.s. By the way i was the person who answered in your first post :)
After conversation with #user3861559 i created an approach for his situation. Instead of pseudo-elements I use nested divs with the same result:
div.hr {
width:70%;
height: 1px;
background: #7F7F7F;
}
div.after {
position: absolute;
border-style: solid;
border-width: 15px 15px 0;
border-color: #FFFFFF transparent;
display: block;
width: 0;
z-index: 1;
top: 8px;
left: 35%;
}
div.before {
position: absolute;
border-style: solid;
border-width: 15px 15px 0;
border-color: #7F7F7F transparent;
display: block;
width: 0;
z-index: 1;
top: 9px;
left: 35%;
}
<div class="hr">
<div class="before"></div>
<div class="after"></div>
</div>
I have the following CSS that creates a blue speech bubble (JS fiddle: http://jsfiddle.net/C5N2c/:
<div class="bubble">Content</div>
.bubble
{
cursor: pointer;
position: absolute;
left:30px;
width: 200px;
height: 50px;
padding: 0px;
background: blue;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
border: blue solid 6px;
}
.bubble:after
{
content: '';
position: absolute;
border-style: solid;
border-width: 0 10px 10px;
border-color: blue transparent;
display: block;
width: 0;
z-index: 1;
top: -10px;
left: 26px;
}
.bubble:before
{
content: '';
position: absolute;
border-style: solid;
border-width: 0 15px 15px;
border-color: blue transparent;
display: block;
width: 0;
z-index: 0;
top: -21px;
left: 21px;
}
I want to add a 1px red border around the edge of this bubble, including the small speech arrow. How can I do this? It needs to be IE8 compliant.
Take a look a this Fiddle, though I havent been able to test in IE8..
The CSS:
.bubble
{
cursor: pointer;
position: absolute;
left:30px;
width: 200px;
height: 50px;
padding: 0px;
background: blue;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
border: red solid 1px;
z-index:2;
}
.bubble:after
{
content: '';
position: absolute;
border-style: solid;
border-width: 0 9px 9px;
border-color: blue transparent;
display: block;
width: 0;
z-index: 1;
top: -9px;
left: 26px;
}
.bubble:before
{
content: '';
position: absolute;
border-style: solid;
border-width: 0 11px 12px;
border-color: red transparent;
display: block;
width: 0;
z-index: 0;
top: -12px;
left: 24px;
}
See working version on jsFidde
I did it sometime ago, you can just change the colours, It's not tested on IE, I am currently on OSX and it's a mess trying to view it on IE xD
html:
<div class="dialog">
<div class="triangleOutline">
<div class="triangle"></div>
</div>
<div class="dialogBox">
Hello!<br>
I'm a full CSS fancy dialog box :D
</div>
</div>
css:
body{
font-size: 100%;
font-family: "Arimo";
background: #eee;
}
.triangle,
.triangleOutline{
position:relative;
width: 0;
height: 0;
border: solid transparent;
border-width: 7px;
border-bottom-color: #aaf;
}
.triangleOutline{left: 15px;}
.triangle{
top: -6px; /* outline's width - 1 */
left: -7px; /* outline's width */
border-bottom-color: white;
}
.dialogBox{
background: white;
border: 1px solid #aaf;
padding: 0.75em;
border-radius: 3px;
min-height: 1.5em;
line-height: 1.5em;
}
Just change the colors as you like, I guess you are not using THOSE colors right? XD
Try this code:
.bubble
{
cursor: pointer;
position: absolute;
left:30px;
width: 200px;
height: 50px;
padding: 0px;
background: blue;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
border: blue solid 6px;
box-shadow: 0 0 0 1px red;
}
.bubble:after
{
content: '';
position: absolute;
border-style: solid;
border-width: 0 15px 15px;
border-color: blue transparent;
display: block;
width: 0;
z-index: 0;
top: -19px;
left: 21px;
}
.bubble:before
{
content: '';
position: absolute;
border-style: solid;
border-width: 0 15px 15px;
border-color: red transparent;
display: block;
width: 0;
z-index: 0;
top: -21px;
left: 21px;
}
See this jsfiddle.