How do you create the arrow that appears when you hover over "Reviews" on this site?
http://mac.appstorm.net/category/reviews/
I want to create this via css but am not sure how to do so. Also what is the correct "term" for that?
Thanks!
You can see an example at Simple Stock Search if you register and hover over one of the menu options.
The CSS for such an arrow is:
.reviews:after
{
content: "";
z-index: 9999;
position: absolute;
bottom: -10px;
left: 50%;
margin-left: -10px;
border-top: 10px solid red;
border-right: 10px solid transparent;
border-left: 10px solid transparent;
}
Visit this JSFiddle for a demo.
from cssarrowplease.com
demo
HTML
<span class="arrow_box">test</span>
CSS
.arrow_box:hover {
position: relative;
background: #88b7d5;
border: 4px solid #c2e1f5;
width: 100px;
display:inline-block;
height: 25px;
}
.arrow_box:hover:after, .arrow_box:hover:before {
top: 100%;
left: 50%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
}
.arrow_box:hover:after {
border-color: rgba(136, 183, 213, 0);
border-top-color: #88b7d5;
border-width: 5px;
margin-left: -5px;
}
.arrow_box:hover:before {
border-color: rgba(194, 225, 245, 0);
border-top-color: #c2e1f5;
border-width: 11px;
margin-left: -11px;
}
Related
So I want to create a button that looks like this when it's active (you can see that it has a little arrow pointing to the right)
Currently I have something like that, it stays blue after clicked, text turns white and all that. I used .addClass for that, but I have no idea if I should use it again to glue on a triangle onto my button, there has to be a better way right?
While I'm at it, how can I make the shadow/sidebar?
Please, experienced people, give this beginner some enlightenment
add below css for
.active {
height: 50px;
width: 100px;
background: blue;
height: 50px;
width: 100px;
background: blue;
position: relative;
}
.active:after {
content: "";
border-right: 10px solid transparent;
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
border-left: 10px solid black;
height: 0;
width: 0;
position: absolute;
right: -20px;
top: 50%;
transform: translateY(-50%);
}
<div class="active"></div>
try
.active {
height: 50px;
width: 200px;
background: #0092ff;
}
.active:after {
content: "";
border-style: solid;
border-width: 10px 0 10px 10px;
border-color: transparent transparent transparent #0092ff;
display: block;
margin-left: 200px;
transform: translateY(75%);
}
.active:hover:after {
content: "";
border-left: 0px solid #0092ff;
transition: border-left 0.2s ease-in;
}
<div class="active"></div>
Please Check following working example.
$(function() {
$('.btn').click(function() {
$(this).closest('ul').find('.active').removeClass('active');
$(this).addClass('active');
});
});
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
li a {
padding: 10px;
background: teal;
position: relative;
display: block;
width: 60px;
cursor: pointer;
}
.active::after {
content: " ";
border-right: 10px solid transparent;
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
border-left: 10px solid teal;
height: 0;
width: 0;
position: absolute;
right: -20px;
top: 50%;
transform: translateY(-50%);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
<li><a class="btn active">Home</a></li>
<li><a class="btn">News</a></li>
<li><a class="btn">Contact</a></li>
<li><a class="btn">About</a></li>
</ul>
you need to add position:relative to the selector ul li.
after that, you can use the following code below to add content through the pseudo element after of the active link.
change the size of the borders, as well as positions for top and right to suit your needs.
ul li.active:after {
content: "";
width: 0;
height: 0;
border-top: 20px solid transparent;
border-bottom: 20px solid transparent;
border-left: 20px solid #0092ff;
position:absolute;
top: 15px;
right:-15px;
}
How can I add a right facing triangle to the end of a div? I want the content/size of the div to be the same, just with a right facing triangle on the right side of the div. Thanks.
For right arrow in the middle of the content box
.arrow_box {
position: relative;
background: #88b7d5;
border: 2px solid #c2e1f5;
height: 40px;
width: 80px;
}
.arrow_box:after,
.arrow_box:before {
left: 100%;
top: 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-left-color: #88b7d5;
border-width: 10px;
margin-top: -10px;
}
.arrow_box:before {
border-color: rgba(194, 225, 245, 0);
border-left-color: #c2e1f5;
border-width: 13px;
margin-top: -13px;
}
<div class="arrow_box"></div>
I'm trying to make something like this:
I'd like to use pure CSS. Bootstrap v3 is already loaded.
I've gotten pretty close with something like
.bubble {
position:relative;
left: 15px;
padding: 10px;
background: #FFFFCC;
margin: 5px 5px;
max-width: 250px;
border: #FFCC00 solid 1px;
}
.bubble:before {
position:absolute;
content: "";
top:15px;left:-10px;
border-width: 10px 15px 10px 0px;
border-color: transparent #FFFFCC;
border-style: solid;
}
But the result is not quite what I'm looking for.
I've searched around and fiddled a bit, but have not found an elegant solution that fits my needs.
Years ago I would have done this with tables and images, but surely there's a better way in 2015?
Here is a 2015 version...
.bubble {
position: relative;
background: #FFFFCC;
border: 1px solid #FFCC00;
max-width:250px;
padding:10px;
font-family:arial;
margin:0 auto;
font-size:14px;
border-radius:6px;
}
.bubble:after,
.bubble:before {
right: 100%;
top: 50%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
}
.bubble:after {
border-color: rgba(255, 255, 204, 0);
border-right-color: #FFFFCC;
border-width: 15px;
margin-top: -15px;
}
.bubble:before {
border-color: rgba(255, 204, 0, 0);
border-right-color: #FFCC00;
border-width: 16px;
margin-top: -16px;
}
SEE IT IN ACTION:
http://jsfiddle.net/ajahb5p1/
NOTE:
You can adjust the size of the arrow simply by changing the border-width and margin-top values in the .bubble:after definition (currently set to 15px and -15px)
To make sure it retains it's border, you would also need to change these same 2 values in the .bubble:before definition (currently set to 16px and -16px)
I'm having some issues with border-bottom and border-image.As I understand it I can set an image for my border , in this case I want the image to be :
However I do not get the image and it just stays a normal 3px border with the color I've specified.And it seems that the image is not taken into consideration.
Can anyone point me to the right direction(Check bootply):
http://www.bootply.com/G5LTvI8YR9
You can do it through css only without using any image
Demo
ul.nav a:hover {
position: relative;
border-bottom: 4px solid #f39385;
}
ul.nav a:hover:after, ul.nav a:hover:before {
bottom: 0px;
left: 50%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
}
ul.nav a:hover:after {
border-color: rgba(243, 147, 133, 0);
border-bottom-color: #f39385;
border-width: 3px;
margin-left: -3px;
}
ul.nav a:hover:before {
border-bottom-color: #f39385;
border-width: -6px;
margin-left: -6px;
border-color: rgba(243, 147, 133, 0);
}
In your case, using a background image on hover state is much simpler than using an image for the border.
I made up this example based on you bootply that should show what you are looking for (The background image is the one you posted, you might need to tweak it and remove unused white parts on the left and right of it so that the triangle is centered) :
DEMO
CSS :
a:hover {
color: #f39385!important;
background: url(http://i.stack.imgur.com/fIzS3.png) right bottom no-repeat;}
a {
text-transform: uppercase;
color: #b9b9b9;
font-size: 11px;
padding-bottom: 30px;
width:112px;
display:inline-block;
text-align:center;
}
Here's a FIDDLE if you are interested in CSS solution.
<span class="border"></span>
.border {
position: relative;
display: block;
width: 70px;
background: #f0745f;
border: 4px solid #f0745f;
}
.border:before,
.border:after {
bottom: 100%;
left: 50%;
border: solid transparent;
content: "";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
}
.border:before {
border-color: transparent;
border-bottom-color: #f0745f;
border-width: 10px;
margin-left: -10px;
}
.border:after {
border-color: transparent;
border-bottom-color: #f0745f;
border-width: 4px;
margin-left: -4px;
}
I find the below code can run perfectly on IE8,IE9 and firefox,but can not run well on IE7,the up arrow can not show up,why?
CSS:
.arrow_box {
position: relative;
background: #88b7d5;
border: 4px solid #c2e1f5;
}
.arrow_box:after, .arrow_box:before {
bottom: 100%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
}
.arrow_box:after {
border-color: rgba(136, 183, 213, 0);
border-bottom-color: #88b7d5;
border-width: 30px;
left: 50%;
margin-left: -30px;
}
.arrow_box:before {
border-color: rgba(194, 225, 245, 0);
border-bottom-color: #c2e1f5;
border-width: 36px;
left: 50%;
margin-left: -36px;
}
HTML:
<br/>
<br/>
<br/>
<div class="arrow_box"><h1 class="logo">css arrow please!</h1></div>
:before and :after selectors are not supported on IE7.
You would either have to change your CSS to not use :before and :after, or you can use a js shiv that will basically emulate the behavior of those selectors using javascript. Here's a post about how to do that.