This question already has answers here:
Speech bubble with arrow
(3 answers)
Closed 6 years ago.
I'm trying to have a CSS tooltip with white background color and 1px border. How to have a border instead of plain black arrow?
.up-arrow {
display: inline-block;
position: relative;
border: 1px solid #777777;
text-decoration: none;
border-radius: 2px;
padding: 20px;
}
.up-arrow:after {
content: '';
display: block;
position: absolute;
left: 140px;
bottom: 100%;
width: 0;
height: 0;
border-bottom: 10px solid black;
border-top: 10px solid transparent;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
}
<div href="#" class="up-arrow">Button with Up Arrow</div>
PS: Even if it looks similar to another question, the details of design are very important. For example, there was originally here 3 different answers (now 2 of them deleted), slightly different in design. Even if very little different, their arrow look was a bit less perfect that the current perfect answer! The devil is in the detail!
The goal is here to have a plain white tooltip, with 1px wide border. Even if similar look to some other, it's not a duplicate of other question (speech bubble). Once again details are important to achieve such a sleek look.
One of the solutions would be adding another pseudo element :before which is slightly smaller than :after. It's not the nicest solution ever, but it works perfectly fine for particular cases.
(You may notice that I've also cleaned up your code a little and replaced :after with :before to have proper z-index for both pseudo elements. Let me know if you need further explanation)
.up-arrow {
display: inline-block;
position: relative;
border: 1px solid #777777;
text-decoration: none;
border-radius: 2px;
padding: 20px;
margin-top: 50px;
}
.up-arrow:before {
content: '';
display: block;
position: absolute;
left: 140px;
bottom: 100%;
width: 0;
height: 0;
border: 10px solid transparent;
border-bottom-color: black;
}
.up-arrow:after {
content: '';
display: block;
position: absolute;
left: 141px;
bottom: 100%;
width: 0;
height: 0;
border: 9px solid transparent;
border-bottom-color: white;
}
<div href="#" class="up-arrow">Button with Up Arrow</div>
Related
I'm looking for a proper way to have an effect highlighted in below picture at
the bottom of my box in CSS3.
Getting this effect with shadow will have the problem that the border-radius will decrease if you lower the size of the shadow. Can be solved, but it's quite convoluted.
Your best bet would be to use pseudo elements for this
.test {
width: 300px;
height: 100px;
border: solid 1px green;
border-radius: 10px;
position: relative;
background-color: white;
}
.test:after, .test:before {
content: "";
position: absolute;
border: inherit;
border-radius: inherit;
background-color: white;
height: 50px;
}
.test:after {
left: 6px;
right: 6px;
bottom: -6px;
z-index: -1;
}
.test:before {
left: 14px;
right: 14px;
bottom: -12px;
z-index: -2;
}
<div class="test"></div>
Have tried box-shadow? You could use box-shadows multiple times and control their positions. for example :
box-shadow: 1px 1px 1px #color of your choice, (comma for another shadow) 2px 2px 2px #color of your choice, (and on as much as you want);
you can add another value like 1px 1px 1px 1px black . the fourth represents the size of the shadow.
I hope this helps or if you could be more specific :)
I need help turning the arrow white with a blue border like the box containing the text. I need to use the title inside an a tag as the content but feel free to edit everything else I managed to get it to a certain point but cant seem to get past this:
CSS
.toop {
position: relative;
padding: 0 5px;
line-height: 23px;
}
.toop:hover:after {
content: attr(title);
color: #474747;
font-size: 14px;
line-height: 150%;
text-align: left;
background-color: #ffffff;
border-radius: 5px;
border: 2px solid #2192ce;
padding: 5px 10px;
opacity: 0.9;
display: block;
width: 180px;
position: absolute;
left: 10px;
bottom: 40px;
z-index: 98;
}
.toop:hover:before {
content: "";
border: solid;
border-color: #2191ce transparent;
border-width: 10px 10px 0 10px;
opacity: 0.9;
display: block;
left: 30px;
bottom: 30px;
position: absolute;
z-index: 99;
}
HTML
<br>
<br>
<br>
<br>
<br>
Tooltip is here
you can not do that , you can not have a border around the "arrow" . making that arrow is a trick you can do with css to manipulate the :after and :before to make it appear like an arrow , but you can not have a border outside of that unless you wanted to use an image and put it in that place.
see an example I made of your code to show
outline: 2px solid #000;
outline can be used to make a border outside of the actual border, but it is not going to be anything like what you wanted.
http://jsfiddle.net/pp9t0vqb/4/
The best you can do is fake the arrow with an entire block:
.toop:hover:before {
content: "";
width:10px;
height:10px;
background:white;
border: 2px solid #2192ce;
border-width:0 2px 2px 0;
transform:rotate(45deg);
display: block;
left: 30px;
bottom:35px;
position: absolute;
z-index: 99;
}
But in this case you can't handle the opacity property.
Check this Demo Fiddle
This question already has answers here:
How do CSS triangles work?
(23 answers)
Closed 8 years ago.
There are a lot of CSS shapes shown on CSS Tricks. I am particularly surprised by the star:
How does the CSS below create this shape?
#star-five {
margin: 50px 0;
position: relative;
display: block;
color: red;
width: 0px;
height: 0px;
border-right: 100px solid transparent;
border-bottom: 70px solid red;
border-left: 100px solid transparent;
transform: rotate(35deg);
}
#star-five:before {
border-bottom: 80px solid red;
border-left: 30px solid transparent;
border-right: 30px solid transparent;
position: absolute;
height: 0;
width: 0;
top: -45px;
left: -65px;
display: block;
content: '';
transform: rotate(-35deg);
}
#star-five:after {
position: absolute;
display: block;
color: red;
top: 3px;
left: -105px;
width: 0px;
height: 0px;
border-right: 100px solid transparent;
border-bottom: 70px solid red;
border-left: 100px solid transparent;
transform: rotate(-70deg);
content: '';
}
<div id="star-five"></div>
Let's break it into pieces:
The yellow borders are actually set as transparent in the final product so they don't show. They are yellow here to show how the borders look.
As commented above, this answer shows the idea behind the basic triangle shape.
The div by itself:
<div id="star-five"></div>
Combining the :before pseudo element is the same as this:
<div id="star-five">
<div id="before"></div>
</div>
Finally, combining the :after pseudo element is the same as this:
<div id="star-five">
<div id="before"></div>
<div id="after"></div>
</div>
Now you overlap each element precisely using position: absolute; and rotate with transform as needed to get the final product:
Let's visualise it!
You can draw a triangle using large borders, which is what is happening there. Then they're just rotating and positioning the triangles in a star pattern.
This is a simple question, I even think someone asked this before, but It never got a real answer.
What I want is to avoid border overlapping, It's that simple. Here's an example:
div{
width: 400px;
height: 150px;
border: 1px solid red;
border-bottom: 7px solid black;
}
You can see that the borders overlap in the corner.
Here's the live example: jsFiddle Example
What I really want to do is to make the bottom border cover the right and left border.
Can someone tell me what can I do here?
You can overlay a pseudo element over your div:
div {
background-color: gold;
border-top: 4px solid #172e4e;
height: 100px;
position: relative;
width: 100px;
}
div::after {
content: "";
position: absolute;
bottom: 0; top: 0px; left: 0; right: 0;
border-right:4px solid orange;
border-left:4px solid orange;
}
Example: http://jsfiddle.net/vpHW5/10/
I'm trying to do a blog stylish design with a "date block" to the left of parenting div. It works in IE and Chrome but in Firefox the top-parent div expands.
html
<div class="post_bg">
<div class="post_inner">
<div class="blue">date</div>
text
<br /><br />
</div>
</div>
Css
.post_bg {
width: 700px;
background-color: #f0f0f0;
outline: 1px solid #d8d8d8;
border-top: 1px solid #fff;
padding: 5px 5px 5px 5px;
}
.post_inner {
clear: both;
background-color: #fdfdfd;
border: 1px solid #d8d8d8;
}
.blue {
overflow: visible;
width: 40px;
height: 40px;
background-color: #55a4cc;
position: relative;
bottom: -5px;
right: 40px;
}
Here is a picture showing my problem:
And while I'm at it, how to I get my "text" to the top of the box?
To get the outline to work in Firefox replace:
outline: 1px solid #d8d8d8;
With:
box-shadow: 0 0 0 1px #d8d8d8;
To get the text aligned to the top make .post_inner position: relative; and .blue position: absolute;. Then adjust .blue's position accordingly.
Demo: http://jsfiddle.net/ThinkingStiff/8SyGV/
CSS:
.post_bg {
background-color: #f0f0f0;
border-top: 1px solid #fff;
left: 40px;
box-shadow: 0 0 0 1px #d8d8d8;
padding: 5px 5px 5px 5px;
position: relative;
width: 300px;
}
.post_inner {
background-color: #fdfdfd;
border: 1px solid #d8d8d8;
position: relative;
}
.blue {
background-color: #55a4cc;
height: 40px;
left: -40px;
position: absolute;
top: 0;
width: 40px;
}
HTML:
<div class="post_bg">
<div class="post_inner">
<div class="blue">date</div>
text
<br /><br />
</div>
</div>
This is a "bug" in Firefox 3.X as described here.
There is a workaround which I found here that uses :before to prepend an absolutely positioned container which applies the outline instead.
So for your code you would remove outline from .post_bg and add the following CSS to your stylesheet:
.post_bg:before {
bottom: 0px;
content: '';
left: 0px;
margin: 0;
outline: 1px solid #d8d8d8;
padding: 0;
position: absolute;
right: 0px;
top: -1px; /* -1 to accomodate border-top in .post_bg */
}
JSFiddle: http://jsfiddle.net/GqACN/
You should still use the new implementation of the .blue class by #ThinkingStiff to resolve the text issue mentioned in your question.
Update
This bug can be found here on bugzilla.
However, as pointed out by #BoltClock in the comments above, "there's nothing that specifies how outlines should be drawn with respect to positioned descendants" - so to say this is a bug is incorrect since the spec is not clear on how it is to be implemented. Mozilla have just interpreted the specification in a different way to Google and Microsoft.