I wold like to change the active:after of the li active item, like the blog example (http://getbootstrap.com/examples/blog/), but in my case, I need a bottom bar instead of a triangle.
The example does this:
.nav
.navbar-nav .active:after {
position: absolute;
bottom: 0;
left: 50%;
width: 0;
height: 0;
margin-left: -5px;
vertical-align: middle;
content: " ";
border-right: 5px solid transparent;
border-bottom: 5px solid;
border-left: 5px solid transparent;
}
Everything I got so far is:
.blog-nav .active:after {
position: absolute;
bottom: 0;
left: 50%;
width: 0;
height: 0;
margin-left: -5px;
vertical-align: middle;
content: " ";
border-right: 10px solid;
border-bottom: 5px solid;
border-left: 10px solid;
}
the problem is that it doesnt fit the link text.
How can I change this code to look like a rectangle that fits the word with under the link instead of a triangle?
.navbar-nav .active:after {
position: absolute;
bottom: 0;
left: 50%;
width: 10px;
height: 5px;
margin-left: -5px;
vertical-align: middle;
content: " ";
}
If you want to modify how big is the rectangle, just modify height and width as you please
Related
I'm wondering if there is a css only solution to display a link button like the one below. Any advises?
You can simply use pseudo elements and some border property then adjust the different values to get what you want:
.link {
padding: 10px;
display: inline-block;
width: 80px;
border-top: 1px solid #000;
border-bottom: 1px solid #000;
text-align: center;
position: relative;
overflow: hidden;
}
.link:before,.link:after {
content: "";
position: absolute;
height: 30px;
width: 30px;
border: 1px solid #000;
left: -19px;
top: 3px;
background: #fff;
transform: rotate(45deg);
transform-origin: center;
}
.link:after {
right: -19px;
left:auto;
}
link
This question already has answers here:
CSS triangle custom border color
(5 answers)
Closed 6 years ago.
I am trying to add red borders to the triangle in the top left corner of the dropdown. But the problem is that the triangle itself is built as borders. So I've got no idea how to do that. Help me please.
.dropdown {
position: relative;
vertical-align: middle;
display: inline-block;
}
.dropdown-content {
position: absolute;
min-width: 160px;
background-color: yellow;
padding: 12px 16px;
margin-top: 20px;
z-index: 1;
border-color: red;
border-width: thin;
border-style: solid;
}
.dropdown-content a{
display: block;
}
.dropdown-content:after {
position: absolute;
left: 70%;
top: -20px;
width: 0;
height: 0;
content: '';
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-bottom: 20px solid yellow;
}
<div class='dropdown'>
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</div>
You can add the triangle borders with another pseudo element.
.dropdown-content:before,
.dropdown-content:after {
position: absolute;
left: 70%;
width: 0;
height: 0;
content: '';
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-bottom-width: 20px;
border-bottom-style: solid;
}
.dropdown-content:before {
top: -21px; /* extra -1 pixel offset at the top */
border-bottom-color: red;
}
.dropdown-content:after {
top: -20px;
border-bottom-color: yellow;
}
.dropdown {
position: relative;
vertical-align: middle;
display: inline-block;
}
.dropdown-content {
position: absolute;
min-width: 160px;
background-color: yellow;
padding: 12px 16px;
margin-top: 20px;
z-index: 1;
border-color: red;
border-width: thin;
border-style: solid;
}
.dropdown-content a {
display: block;
}
.dropdown-content:before,
.dropdown-content:after {
position: absolute;
left: 70%;
width: 0;
height: 0;
content: '';
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-bottom-width: 20px;
border-bottom-style: solid;
}
.dropdown-content:before {
top: -21px; /* extra -1 pixel offset at the top */
border-bottom-color: red;
}
.dropdown-content:after {
top: -20px;
border-bottom-color: yellow;
}
<div class='dropdown'>
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</div>
Try creating inner triangle which is smaller.
Check this answer: Adding border to CSS triangle
And this: CSS triangle custom border color
Following is my jsfiddle in which I am trying to place an arrow image on the bottom border centerally aligned but I am unable to do that. Kindly let me know how to put an arrow image so its centrally aligned no matter what the width of the box is or height? Thanks
http://jsfiddle.net/wn7JN/463/
.bubble
{
position: relative;
width: 100px;
height: 50px;
padding: 0px;
background: #FFFFFF;
border: #000 solid 1px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}
.arrow:before
{
content: "";
position: absolute;
left: 50%;
border-style: solid;
border-width: 26px 26px 0;
border-color: #000 transparent;
display: block;
width: 0;
background-image:url(http://img2.wikia.nocookie.net/__cb20120818025551/merlin1/images/4/46/Drop_down_arrow.gif);
z-index: 0;
}
Try this. I add some changes check,
.bubble
{
position: relative;
width: 600px;
height: 50px;
padding: 0px;
background: #FFFFFF;
border: #000 solid 1px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}
.arrow:before
{
content: "";
position: absolute;
left: 50%;
bottom:-26px;
border-style: solid;
border-width: 26px 26px 0;
border-color: #000 transparent;
display: block;
width: 0;
z-index: 0;
margin:0 0 0 -26px;
}
replace the .arrow:before style & try it. it will align the arrow at center bottom.
.arrow:before
{
content: "";
position: absolute;
left: 50%;
top:100%;
margin-left:-26px;
border-style: solid;
border-width: 26px 26px 0;
border-color: #000 transparent;
display: block;
width: 0;
background:url(http://img2.wikia.nocookie.net/__cb20120818025551/merlin1/images/4/46/Drop_down_arrow.gif);
z-index: 0;
}
My question is similar to this question: Arrow Box with CSS But instead of only 1 box I need to align several boxes. And still be able to see the arrow on all boxes.
In this example: http://jsfiddle.net/casperskovgaard/LHHzt/1/ I have created two arrow boxes that float to the left. The problem is that the arrow on the first box is not visible.
How do I make the arrow visible?
HTML:
<div class="arrow"></div>
<div class="arrow"></div>
CSS:
.arrow {
float: left;
width: 128px;
height: 100px;
background-color: #f0f0f0;
border: 1px solid #999;
position: relative;
}
.arrow:after {
content: '';
position: absolute;
top: 0px;
left: 128px;
width: 0;
height: 0;
border: 50px solid transparent;
border-left: 12px solid #f0f0f0;
}
.arrow:before {
content: '';
position: absolute;
top: 0px;
left: 129px;
width: 0;
height: 0;
border: 50px solid transparent;
border-left: 12px solid #999;
}
EDIT:
The first arrow must overlap the box to the right. See solution from artSx: http://jsfiddle.net/LHHzt/6/ Only thing missing from this solution is that it should be possible to add several (more than two) boxes
if you change the z-index of the after psudeo element to 2 and then the before element to 1 then it should work as you intend:
.arrow {
float: left;
width: 128px;
height: 100px;
background-color: #f0f0f0;
border: 1px solid #999;
position: relative;
margin-right:15px;
}
.arrow:after {
content: '';
position: absolute;
top: 0px;
left: 128px;
width: 0;
height: 0;
border: 50px solid transparent;
border-left: 12px solid #f0f0f0;
}
.arrow:before {
content: '';
position: absolute;
top: 0px;
left: 129px;
width: 0;
height: 0;
border: 50px solid transparent;
border-left: 12px solid #999;
}
http://jsfiddle.net/peteng/LHHzt/15/
add this :
.arrow:first-child{
z-index:10;
}
JsFiddle with correction
Just add a z-indexto your .arrow:before. Here is the live version http://jsfiddle.net/LHHzt/13/
.arrow:before {
content: '';
position: absolute;
top: 0px;
left: 129px;
width: 0;
height: 0;
z-index:2;
border: 50px solid transparent;
border-left: 12px solid #999;
}
Works with as many box as you want :)
try this
http://jsfiddle.net/casperskovgaard/LHHzt/1/
.arrow {
width: 128px;
height: 100px;
background-color: #f0f0f0;
border: 1px solid #999;
position: relative;
}
.arrow:after {
content: '';
position: absolute;
top: 0px;
left: 128px;
width: 0;
height: 0;
border: 50px solid transparent;
border-left: 12px solid #f0f0f0;
}
.arrow:before {
content: '';
position: absolute;
top: 0px;
left: 129px;
width: 0;
height: 0;
border: 50px solid transparent;
border-left: 12px solid #999;
}
Just add a margin to the arrow...
.arrow {
float: left;
width: 128px;
height: 100px;
background-color: #f0f0f0;
border: 1px solid #999;
position: relative;
margin-right: 15px;
}
http://jsfiddle.net/LHHzt/11/
Or change z-index to display above if you want them to overlay
Just adding a margin to the arrow resolves the problem.
See this JSFiddle : http://jsfiddle.net/LHHzt/9/
I just added a
margin-right: 15px;
How do I remove the CSS triangles on main menu items that don't have a sub-menu?
See http://v2.letsfaceitbeauty.ca
I think this is the relevant CSS code and I believe ".has-sub" is the correct selector, but I can't figure out how.
#cssmenu > ul > li:hover:after { /* this is the arrow */
content: '';
display: block;
width: 0;
height: 0;
position: absolute;
left: 50%;
bottom: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-bottom: 10px solid #6796ff;
margin-left: -10px;
}
If you know the css that makes the triangle and the element you want the triangle on, just put those two pieces together, i.e. replace the previous rule with
#cssmenu > ul > li.has-sub:hover:after { /* this is the arrow */
content: '';
display: block;
width: 0;
height: 0;
position: absolute;
left: 50%;
bottom: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-bottom: 10px solid #6796ff;
margin-left: -10px;
}