I have a problem with my css bubble. Can you help me please where I have missing. I must have missed a point I do not know.I have tried with z-index, but still not working.but I have to tell you this overflow: hidden I had to use. This is demo: CodePen
This is HTML code:
<div class="container">
<div class="bubble">
</div>
</div>
And this is CSS code:
.container{
float:left;
width:500px;
height:auto;
margin-left:100px;
margin-top:100px;
border:1px solid d8dbdf;
border-radius:3px;
-webkit-border-radius:3px;
-moz-border-radius:3px;
-o-border-radius:3px;
}
.bubble
{
position: relative;
width: 550px;
height: auto;
overflow:hidden;
padding: 15px;
background: #f4f4f4;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
border: #d8dbdf solid 1px;
}
.bubble:after
{
content: '';
position: absolute;
border-style: solid;
border-width: 0 12px 10px;
border-color: #FFFFFF transparent;
display: block;
width: 0;
z-index: 1;
top: -5px;
left: 22px;
}
.bubble:before
{
content: '';
position: absolute;
border-style: solid;
border-width: 0 12px 10px;
border-color: #d8dbdf transparent;
display: block;
width: 0;
z-index: 0;
top: -6px;
left: 22px;
}
You could set overflow: hidden; to the <form> tag inside the bubble instead of .bubble.
You could also use a clearfix when you can't, or don't want to, use overflow: hidden;. Since you use both before and after on .bubble already you still need to apply it to the <form> tag.
.clearfix:after {
content: '';
display: table;
clear: both;
}
Codepen example with clearfix
Related
I want to achieve this
But using this css
border-left: 3px solid red;
border-radius: 3px;
It is producing this result
plz ignore spacing, i will add that
I would recommend using pseudo-classes in order to create your red bar. Try this:
span {
font-family: Arial;
font-size: 3em;
}
span::before {
content: "";
display: inline-block;
margin-right: 10px;
width: 10px;
height: 40px;
border-radius: 50px;
background-color: red;
}
<span>2.1 Cr</span>
Use border-top-left-radius and border-bottom-left-radius
.div{
margin-top:40px;
width:50px;
height:10px;
border-radius:50px;
background:red;
transform:rotateZ(90deg);
}
<div class="div"></div>
Edited:
try this
Fiddle file:
https://jsfiddle.net/swuzqpbt/
htmlelement {
position: relative;
height: 40px;
border: none;
margin: 20px auto;;
}
htmlelement ::before {
content: '';
display: inline-block;
background: red;
width: 5px;
height: 40px;
top: 0;
left: 0;
border-radius: 140px;
position: absolute;
border:none;
}
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>
I have tried to tweak the CSS from
http://jsfiddle.net/wn7JN/ to place an arrow in a <div> in the top left corner (see image below), but I can't seem to figure out how :before and :after in CSS work. Every time I update the bottom and left parameters I am left with a black arrow in the top left corner - I think the proper rotation is transform: rotate(220deg) but that is really a guess.
Edit: Is it possible to do this same CSS trick with an rgba color such as rgba(255, 123, 172, 0.25)? When I test it out the transparency becomes an issue with the border overlap.
Any help would be greatly appreciated.
.bubble {
position: relative;
width: 400px;
height: 250px;
padding: 0px;
background: #FFFFFF;
border: #000 solid 1px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}
.bubble:after {
content: "";
position: absolute;
bottom: -25px;
left: 175px;
border-style: solid;
border-width: 25px 25px 0;
border-color: #FFFFFF transparent;
display: block;
width: 0;
z-index: 1;
}
.bubble:before {
content: "";
position: absolute;
top: 250px;
left: 174px;
border-style: solid;
border-width: 26px 26px 0;
border-color: #000 transparent;
display: block;
width: 0;
z-index: 0;
}
<div class="bubble"> </div>
Try like this. Added a working copy.
.bubble {
position: relative;
background:#cbe8f0;
height: 100px;
width:170px;
margin-left:30px;
border-radius:2px;
}
.bubble:after{
content:'';
position:absolute;
border:10px solid transparent;
border-top:10px solid #cbe8f0;
top:0px;
left:-10px;
}
<div class="bubble"> </div>
You can ty this solution too based on the jsfiddle.
.bubble:after
{
content: "";
position: absolute;
top:0px;
left: -21px;
border-style: solid;
border-width: 24px 0px 0px 28px;
border-color: #FFFFFF transparent;
display: block;
width: 0;
z-index: 1;
}
.bubble:before
{
content: "";
position: absolute;
top:-1px;
left:-23px;
border-style: solid;
border-width:20px 0px 0px 23px;
border-color: #000 transparent;
display: block;
width: 0;
z-index: 0;
}
http://jsfiddle.net/wn7JN/1295/
So, here's your bubble code:
.bubble {
position: relative;
width: 400px;
height: 250px;
padding: 0px;
background: #FFFFFF;
border: #000 solid 1px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}
Add this line to the bottom of that: margin-left:25px; This allows there to be room to the side of your bubble for the arrow to even show up. Otherwise, it's there, but you can't see it.
for your bubble:after, change the bottom: -25px to top: 21px and change left: 175px to left: -37px, and add transform: rotate(90deg); to the bottom.
for your bubble:before, change the top: 250px to top: 20px and change left: 174px to left: -39px, and add transform: rotate(90deg); to the bottom.
You will wind up with something like this:
1
Final fiddle: http://jsfiddle.net/eq6mhbwy/
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>
Right, I ran into a bit of a problem and not to sure if this can be solved another way.
I need to move the content: "F"; and center it onto the border I have in the top left corner. Now is this possible without creating another element?
HTML:
<div class="userBoxF"></div>
CSS:
.userBoxF {
width: 200px;
height: 200px;
background: #eee;
border: 1px solid;
border-radius: 10px;
position: relative;
overflow: hidden;
}
.userBoxF:after {
content: "F";
position: absolute;
top: 0;
left: 0;
width: 0;
height: 0;
border: 40px solid #F385FF;
border-right-color: transparent;
border-bottom-color: transparent;
font-size: 30px;
}
The only way I can think to do it is to create the corner as a completely separate element so I can put the text "F" into a span (or something) and move it that way.
Demo Here
Note: Nothing here will change size, width and height for both the box and corner will always be the same.
Here is what I want, using the solution i found but would rather not use.
HTML:
<div class="userBoxF">
<div class="corner"><span>F</span></div>
</div>
CSS:
.userBoxF {
width: 200px;
height: 200px;
background: #eee;
border: 1px solid;
border-radius: 10px;
position: relative;
overflow: hidden;
}
.userBoxF .corner {
position: absolute;
top: 0;
left: 0;
width: 0;
height: 0;
border: 40px solid #F385FF;
border-right-color: transparent;
border-bottom-color: transparent;
font-size: 30px;
}
.userBoxF .corner span {
display: block;
position: absolute;
top: -30px;
left: -20px;
}
Here is a demo of the solution I came up with but I would rather not create anymore elements.
My Solution
You can use :before wit :after together.
I removed the span:
<div class="userBoxF">
</div>
And changed the CSS blocks to this:
.userBoxF:before {
position: absolute;
top: 0;
left: 0;
width: 0;
height: 0;
border: 40px solid #F385FF;
border-right-color: transparent;
border-bottom-color: transparent;
content: "";
}
.userBoxF:after {
display: block;
position: absolute;
top: 10px;
left: 14px;
content: "F";
font-size: 30px;
}
And here's the updated fiddle
EDIT: Here's an added bonus!
You can jack the "F" from the class, if you want it to be more versatile, if you use CSS's attr inside content. Example:
<div class="userBox" data-l="F">
</div>
And:
.userBox:after {
display: block;
position: absolute;
top: 10px;
left: 14px;
content: "" attr(data-l);
font-size: 30px;
}
And another fiddle
Arguably the "F" is actual content as it's not a styling option...it actually denotes something and, perhaps should be read by a screenreader (for instance) then a span with a gradient (TL - BR) mightbe more appropriate.
JSFiddle Demo
HTML
<div class="userBoxF">
<span class="section-letter">F</span>
</div>
CSS
.userBoxF {
width: 200px;
height: 200px;
background: #eee;
border: 1px solid;
border-radius: 10px;
position: relative;
overflow: hidden;
}
.section-letter {
position: absolute;
top: 0;
left: 0;
width:2em;
height:2em;
line-height: 1em;
text-align: left;
padding:0.25em 0 0 0.25em;
font-size: 30px;
background: linear-gradient(135deg, pink 0%, pink 50%, transparent 50%, transparent 100%);
}
Simply use another :psuedo:
Demo Fiddle
.userBoxF {
width: 200px;
height: 200px;
background: #eee;
border: 1px solid;
border-radius: 10px;
position: relative;
overflow: hidden;
}
.userBoxF:before,.userBoxF:after{
position: absolute;
top: 0;
left: 0;
}
.userBoxF:before {
content:"";
border: 40px solid #F385FF;
border-right-color: transparent;
border-bottom-color: transparent;
}
.userBoxF:after {
content:attr(data-l);
top: 10px;
left: 10px;
font-size: 30px;
}
From a single pseudo, you can use a gradient as background : DEMO
.userBoxF {
width: 200px;
height: 200px;
background: #eee;
border: 1px solid;
border-radius: 10px;
position: relative;
overflow: hidden;
}
.userBoxF:after {
content:"F";
position: absolute;
top: 0;
left: 0;
text-indent:20px;
line-height:60px;
width:80px;
height:80px;
background:linear-gradient(to bottom right, #F385FF 51%, transparent 49%);
font-size: 30px;
}
background-image as gradient can be just an image like in old days :
DEMO: