How to add arrow shaped under active tab?
.nav-tabs2 .active { background-image:url(http://www.asiarooms.com/assets/themes/v1/images/areas/details/menu-arrow.png); background-repeat:no-repeat; background-position:bottom center; }
http://jsfiddle.net/DJHZb/13/
<div class="box-head tabs">
<ul class="nav2 nav-tabs2">
<li class="active">
Active Tab</li>
<li>Inactive Tab</li>
<li>Inactive Tab #2</li>
</ul>
</div>
Take a look at "css speech bubble" the idea is the same: http://nicolasgallagher.com/pure-css-speech-bubbles/demo
You have to mess with pseudo css ::after and ::before (which doesn't work in some IE), and borders to create a square or an triangle that overlapping each other.
Example:
.active::after {
content: "";
position: absolute;
bottom: -15px;
left: 50px;
border-width: 15px 15px 0;
border-style: solid;
border-color: #F3961C transparent;
display: block;
width: 0;
}
Here is an explanation how to create triangle with a box and border: http://www.sitepoint.com/pure-css3-speech-bubbles/
For a code like this (which uses bootstrap):
<body>
<div class="panel panel-primary">
<div class="panel-heading" style="font-size:large">
Klujo
</div>
<div class="panel-body">
<div class="wizard">
<a >
Step 1<br>
Authorize the app
</a>
<a class="active">
Step 2<br>
Post your jobs
</a>
</div>
</div>
</div>
</body>
you can use css like this:
.wizard a {
background: #efefef;
display: inline-block;
margin-right: 5px;
min-width: 150px;
outline: none;
padding: 10px 40px 10px;
position: relative;
text-decoration: none;
}
.wizard .active {
background: #007ACC;
color: #fff;
}
.wizard a:before {
width: 0;
height: 0;
border-top: 25px inset transparent;
border-bottom: 35px inset transparent;
border-left: 20px solid #fff;
position: absolute;
content: "";
top: 0;
left: 0;
}
.wizard a:after {
width: 0;
height: 0;
border-top: 35px inset transparent;
border-bottom: 25px inset transparent;
border-left: 21px solid #efefef;
position: absolute;
content: "";
top: 0;
right: -20px;
z-index: 2;
}
.wizard a:first-child:before,
.wizard a:last-child:after {
border: none;
}
.wizard a.active:after {
border-left: 21px solid #007ACC;
}
to get the desired result
</body>
<style>
.tool {
position: relative;
display: inline-block;
border-bottom: 1px dotted red;
}
.tool .text {
visibility: hidden;
width: 100%;
background-color: blue;
color: white;
text-align: center;
border-radius: 5px;
padding: 5px 0;
position: absolute;
top: -1px;
left: 110%;
}
.tool .text::after {
content: "";
position: absolute;
top: 10%;
right: 99%;
margin-top: -2px;
border-width: 5px;
border-style: solid;
border-color: transparent blue transparent transparent;
}
.tool:hover .text {
visibility: visible;
}
</style>
<div class="tool">Mouse Hover
<span class="text">I Can pop up on the right side of these words</div>
</body>
Related
Hello I Want to Stylize Step Menu like attached image here. How can i stylize this? Main issue is border at right side of menu.
Check My JSFiddle URL https://jsfiddle.net/hcx1pv8x/ , i have made different style with triangular border effect though.
My HTML Content for this is:
<div class="steps">
<div class="row">
Step 1
Step 2
Step 3
</div>
</div>
You can write code as mentioned below
.btn.btn-default {
background: grey;
padding: 22px 10px;
border-radius: 0;
border: none;
box-shadow: none;
color: #fff;
text-transform: uppercase;
position:relative;
}
.btn.btn-default:after {
width: 0;
height: 0;
border-top: 65px solid grey;
border-right: 25px solid transparent;
content: "";
top: 0;
position: absolute;
z-index: 1;
right: -24px;
}
.btn.btn-default:before {
width: 0;
height: 0;
border-top: 65px solid #000;
border-right: 25px solid transparent;
content: "";
top: 0;
position: absolute;
z-index: 1;
right: -25px;
}
.steps .btn.btn-default:last-child:after,.steps .btn.btn-default:last-child:before{display:none;}
.btn.btn-default:hover,.btn.btn-default:focus,.btn.btn-default:active,.btn.btn-default:active:focus{color:#fff;background:red;}
.btn.btn-default.active:hover,.btn.btn-default.active:focus,default.active:active{color:#fff;background:red;}
.steps {
border-top: 1px solid #000;
border-bottom: 1px solid #000;
}
.btn.btn-default.active {
background: red;
color:#fff;
box-shadow:none;
}
.btn.btn-default.active:after,.btn.btn-default:hover:after,.btn.btn-default:focus:after,.btn.btn-default:active:after,.btn.btn-default:active:focus:after{
border-top: 65px solid red;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="steps">
<div class="">
Step 1
Step 2
Step 3
</div>
</div>
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
Is it possible to turn this:
into this?
Ie. placing the anchor's text above its absolutely positioned arrow pseudo element.
The only solution I can think of is wrapping the anchor text in a span and then absolutely positioning that again over everything. But is there a way to do this without modifying the markup?
http://jsfiddle.net/pgvx1h04/
.tryout {
margin-top: 50px;
}
.container {
position: absolute;
background: #fff;
border: 1px solid black;
}
.container a {
padding: 3px 11px;
position: relative;
}
.container a:before, .container a:after {
content: "";
position: absolute;
height: 20px;
width: 20px;
transform: rotate(45deg);
top: -8px;
left: 18px;
}
.container a:before {
background: black;
z-index: -1;
}
.container a:after {
background: white;
z-index: 1;
top: -7px;
}
<div class="tryout">
<div class="container">
<a>Hello world</a>
</div>
</div>
Maybe you can fake it with before and after like this:
.tryout {
margin-top: 50px;
}
.container {
position: absolute;
background: #fff;
border: 1px solid black;
}
.container a {
padding: 3px 11px;
position: relative;
}
.container a:before {
content:"";
width: 0;
height: 0;
border: 10px solid;
position: absolute;
border-top-color: transparent;
border-right-color: transparent;
border-left-color: transparent;
border-bottom-color: #000;
top: -19px;
left: 18px;
display: block;
}
.container a:after{
content:"";
width: 0;
height: 0;
border: 10px solid;
position: absolute;
border-top-color: transparent;
border-right-color: transparent;
border-left-color: transparent;
border-bottom-color: #fff;
top: -17px;
left: 18px;
display: block;
}
<div class="tryout">
<div class="container">
<a>Hello world</a>
</div>
</div>
I created arrow(triangle)-style breadcrumbs with CSS, no images.
jsFiddle
html:
<ul class="breadcrumb">
<li>Home</li>
<li>First item</li>
<li>Second item</li>
<li>Last item</li>
</ul>
css:
.breadcrumb {
list-style: none;
overflow: hidden;
}
.breadcrumb li {
background: #F6F6F6;
padding: 5px 0 5px 36px;
background: #F6F6F6;
position: relative;
display: block;
float: left;
}
.breadcrumb li:before {
content:" ";
display: block;
width: 0;
height: 0;
border-top: 25px solid transparent;
border-bottom: 25px solid transparent;
border-left: 20px solid #DDDDDD;
position: absolute;
top: 50%;
margin-top: -25px;
margin-left: 1px;
left: 100%;
z-index: 1;
}
.breadcrumb li:after {
content:" ";
display: block;
width: 0;
height: 0;
border-top: 25px solid transparent;
border-bottom: 25px solid transparent;
border-left: 20px solid #F6F6F6;
position: absolute;
top: 50%;
margin-top: -25px;
left: 100%;
z-index: 2;
}
The problem is when parent's width is not enough to display breadcrumbs in 1 line and it takes 2 lines (or more), overflow:hidden stops working and unwanted parts of triangles get visible (http://screencloud.net/v/fQEq).
Is there a way to fix that?
Try with this style:
.breadcrumb {
list-style: none;
overflow: hidden;
}
.breadcrumb li:before {
border-bottom: 15px solid transparent;
border-left: 20px solid #dddddd;
border-top: 15px solid transparent;
content:" ";
display: block;
height: 0;
left: 100%;
margin-left: 1px;
margin-top: -15px;
position: absolute;
top: 50%;
width: 0;
z-index: 1;
}
.breadcrumb li:after {
border-bottom: 15px solid transparent;
border-left: 20px solid #f6f6f6;
border-top: 15px solid transparent;
content:" ";
display: block;
height: 0;
left: 100%;
margin-top: -15px;
position: absolute;
top: 50%;
width: 0;
z-index: 2;
}
.breadcrumb li {
background: none repeat scroll 0 0 #f6f6f6;
display: block;
float: left;
height: 20px;
padding: 5px 0 5px 33px;
position: relative;
}
Hope it helps!
I want to make a navigation bar that has an arrow pointing down on hover.
Similar to this:
Is there any way to do this in CSS without using the arrow as a background image and putting padding on the element?
You can use the :after pseudo-element to create a CSS triangle and the position it absolutely.
Something like this:
li.active a:after {
content: '';
display: block;
width: 0;
height: 0;
border-top: 6px solid #333;
border-right: 6px solid transparent;
border-left: 6px solid transparent;
position: absolute;
z-index: 1;
top: 100%;
left: 50%;
margin-left: -3px
}
Demo
Use a <div class="arrow_box">INFORMACION</div>
With the CSS:
.arrow_box {
position: relative;
background: #88b7d5;
border: 1px solid #c2e1f5;
}
.arrow_box:after, .arrow_box:before {
top: 100%;
left: 50%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
}
.arrow_box:after {
border-color: rgba(136, 183, 213, 0);
border-top-color: #88b7d5;
border-width: 15px;
margin-left: -15px;
}
.arrow_box:before {
border-color: rgba(194, 225, 245, 0);
border-top-color: #c2e1f5;
border-width: 21px;
margin-left: -21px;
}
Generated with http://cssarrowplease.com/
(a simple search on google and you would have found that..)
Using CssArrowPlease as posted before me:
<div class="header">
<div class="nav">
<ul>
<li>Page</li>
<li id="checked">
Page 1
<div class="arrow_box"></div>
</li>
<li>Page</li>
<li>Page</li>
</ul>
</div>
<div class="sub_nav"></div>
</div>
css:
.header{
width: 50%;
background-color: #fbfbfb;
}
.nav ul{
margin: 0px;
padding: 0px;
list-style-type: none;
}
#checked{
padding: 10px;
background-color: #3178ed;
display: inline-block;
color: #fff;
position: relative;
}
.nav li{
padding: 10px;
display: inline-block;
}
.sub_nav{
width: 100%;
height: 20px;
background-color: #dddddd;
}
.arrow_box {
position: absolute;
right: 0;
left: 0;
bottom: 0;
background: #3178ed;
}
.arrow_box:after, .arrow_box:before {
top: 100%;
left: 50%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
}
.arrow_box:after {
border-color: rgba(49, 120, 237, 0);
border-top-color: #3178ed;
border-width: 10px;
margin-left: -10px;
}
.arrow_box:before {
border-color: rgba(0, 0, 0, 0);
border-top-color: ;
border-width: 11px;
margin-left: -11px;
}
Fiddle: Link