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>
Related
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
I created a border effect using selectors that shows only on corners as you can see in the following snippet.
html {
box-sizing: border-box !important;
}
*, *:before, *:after {
box-sizing: inherit;
}
.ix-border{
position: relative;
padding: 0;
margin: 0;
border-style: solid;
display: inline-block;
border-width: 1px;
background-color: transparent;
border-color: #A00;
}
.ix-border, .ix-border:hover, .ix-border:before, .ix-border:after{
transition: 0.42s;
}
.ix-border:before, .ix-border:after{
content:'';
position:absolute;
padding: 0;
margin: 0;
border-style: solid;
display: inline-block;
border-width: 1px;
background-color: transparent;
border-color: #FFF;
}
.ix-border:before{
top: 8px; right:-1px; bottom: 8px; left:-1px;
border-width: 0 1px 0 1px;
}
.ix-border:after{
top:-1px; right: 8px; bottom:-1px; left: 8px;
border-width: 1px 0 1px 0;
}
.ix-border:hover{
border-color: #F00;
}
.ix-border:hover:before{
top: 16px; bottom: 16px;
border-width: 0 1px 0 1px;
}
.ix-border:hover:after{
right: 16px; left: 16px;
border-width: 1px 0 1px 0;
}
.elmt{
width: 120px;
height: 60px;
text-align: center;
line-height: 60px;
}
<div class="elmt ix-border">
Hello World
</div>
However, I noticed that when a zoom is performed, the element border, that is supposed to be hidden by the ::before/::after selector borders, is sometimes randomly visible on one or two sides, depending on the zoom factor and the navigator.
I added the box-sizing:border box so that borders are included in zooming calculations, as suggested here but it's still not fixed.
So, am I missing something? Is there any hack to fix it or any other way (css only) to achieve to same effect?
This is really good question but I think it is really hard to do with pseudo elements and CSS only ,so I will suggest an alternative approach with real html elements like this so now you avoid the issue but have an extra html elements :(
.corners {
position: relative;
height: 150px;
padding: 10px;
position: relative;
text-align: center;
width: 150px;
padding: 10px;
line-height:150px;
font-size:16px;
}
.top, .bottom {
position: absolute;
width: 10px;
height: 10px;
}
.top {
top: 0;
border-top: 1px solid;
}
.bottom {
bottom: 0;
border-bottom: 1px solid;
}
.left {
left: 0;
border-left: 1px solid;
transition: all 0.42s;
}
.right {
right: 0;
border-right: 1px solid;
transition: all 0.42s;
}
.corners:hover .right{
width:20px;
height:20px;
border-color:red;
}
.corners:hover .left{
width:20px;
height:20px;
border-color:red;
}
<div class="corners">
<div class="top left"></div>
<div class="top right"></div>
<div class="bottom right"></div>
<div class="bottom left"></div>
content goes here
</div>
Ok here is my another take on the issue this time I am using only 3 html elements
div {
position: relative;
width: 100px;
height: 100px;
margin: 20px;
text-align:center;
line-height: 100px;
}
div div:before {
display: block;
content: "";
width: 20px;
height: 20px;
position: absolute;
top: -10px;
left: -10px;
border-top: 1px solid #000;
border-left: 1px solid #000;
transition: all 0.42s;
}
div div:after {
display: block;
content: "";
width: 20px;
height: 20px;
position: absolute;
top: -10px;
right: -10px;
border-top: 1px solid #000;
border-right: 1px solid #000;
transition: all 0.42s;
}
div div {
margin: 0;
position: absolute;
top: 0;
}
span:before {
display: block;
content: "";
width: 20px;
height: 20px;
position: absolute;
bottom: -10px;
left: -10px;
border-bottom: 1px solid #000;
border-left: 1px solid #000;
transition: all 0.42s;
}
span:after {
display: block;
content: "";
width: 20px;
height: 20px;
position: absolute;
bottom: -10px;
right: -10px;
border-bottom: 1px solid #000;
border-right: 1px solid #000;
transition: all 0.42s;
}
div:hover span:after{
width:30px;
height:30px;
border-color:red;
}
div:hover span:before{
width:30px;
height:30px;
border-color:red;
}
div:hover div:before{
width:30px;
height:30px;
border-color:red;
}
div:hover div:after{
width:30px;
height:30px;
border-color:red;
}
<div>some content<div></div><span></span></div>
This question already has answers here:
Aligning css arrow boxes
(6 answers)
Closed 8 years ago.
Hello i would like to style the borders of my list element so that the border-top-right and the border-bottom-right meet in a triangular shape with only css.
like so:
or like so:
I want to achieve both of these two shapes using css alone, to maybe alter the borders to that shape, i would like to know if that is possible and how i can go about it. The element in question is a list element.
If you're after that specific shape, you can use the :before and :after pseudo elements
Demo Fiddle (second shape)
HTML
<div></div>
CSS
div {
display:inline-block;
position:relative;
height:30px;
width:50px;
background:Red;
}
div:before, div:after {
content:'';
position:absolute;
display:inline-block;
width: 0;
height: 0;
border-style: solid;
border-width: 15px 0 15px 26.0px;
}
div:after {
border-color: transparent transparent transparent red;
right:-26px;
}
div:before {
border-color: transparent transparent transparent white;
}
code for your shapes:-
#breadcrumbs-two{
overflow: hidden;
width: 100%;
}
#breadcrumbs-two li{
float: left;
margin: 0 .5em 0 1em;
}
#breadcrumbs-two a{
background: #ddd;
padding: .7em 1em;
float: left;
text-decoration: none;
color: #444;
text-shadow: 0 1px 0 rgba(255,255,255,.5);
position: relative;
}
#breadcrumbs-two a:hover{
background: #99db76;
}
#breadcrumbs-two a::before{
content: "";
position: absolute;
top: 50%;
margin-top: -1.5em;
border-width: 1.5em 0 1.5em 1em;
border-style: solid;
border-color: #ddd #ddd #ddd transparent;
left: -1em;
}
#breadcrumbs-two a:hover::before{
border-color: #99db76 #99db76 #99db76 transparent;
}
#breadcrumbs-two a::after{
content: "";
position: absolute;
top: 50%;
margin-top: -1.5em;
border-top: 1.5em solid transparent;
border-bottom: 1.5em solid transparent;
border-left: 1em solid #ddd;
right: -1em;
}
#breadcrumbs-two a:hover::after{
border-left-color: #99db76;
}
#breadcrumbs-two .current,
#breadcrumbs-two .current:hover{
font-weight: bold;
background: none;
}
#breadcrumbs-two .current::after,
#breadcrumbs-two .current::before{
content: normal;
}
DEMO
div {
background: #EF3E36;
margin: 10px;
}
.arrow1 {
position: relative;
left: 50px;
width: 250px; height: 100px;
}
.arrow1:before {
display: block;
content: "";
width: 0;
height: 0;
position: absolute;
left: -50px;
border: 50px solid #EF3E36;
border-left: 50px solid transparent;
border-right: 0;
}
.arrow1:after {
display: block;
content: "";
background: transparent;
width: 0;
height: 0;
position: absolute;
left: 250px;
border: 50px solid transparent;
border-left: 50px solid #EF3E36;
}
.arrow2 {
position: relative;
width: 300px; height: 100px;
}
.arrow2:after {
display: block;
content: "";
background: transparent;
width: 0;
height: 0;
position: absolute;
left: 300px;
border: 50px solid transparent;
border-left: 50px solid #EF3E36;
}
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
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>