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>
Related
I have a dialogue box or a arrow box which should be set to max height of 60%, and all the content inside the box overflows via scroll, this is the markup:
<div class="cart">
hello world
</div>
and here is the css to make a arrow-head on top:
.cart {
position: fixed;
background: #ffffff;
opacity: 1;
box-shadow: 1px 1px 10px;
border-radius: 5px;
margin-left: 74.8%;
width: 300px;
top: 70px;
padding: 13px;
z-index: 20;
text-align: center;
display: none;
max-height: 60%;
overflow: auto;
}
.cart:after, .cart:before {
top: -20px;
bottom: 100%;
left: 50%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
}
.cart:after {
border-color: rgba(255, 255, 255, 0);
border-bottom-color: #ffffff;
border-width: 10px;
margin-left: -10px;
}
.cart:before {
border-color: rgba(12, 143, 176, 0);
border-bottom-color: #999;
border-width: 11px;
margin-left: -11px;
}
if I remove the "overflow" property the arrow head shows up, but when I use it, which I have to It disappears, I want both, an arrow head and scrollable div, but I think the arrowhead just gets inside the scroll. is there any solution for this?
Thanks for the help
I'm trying to create a double bordered tool tip with a triangle but I can't figure out how to do the outline part because there is no outline-right/left/top/bottom.
Here is what I have so far
body {
background-color: rgb(83, 110, 218);
}
.trigger {
margin-top: 150px;
position: relative;
width: 30px;
height: 30px;
background-color: #000;
}
.tooltip {
/* Misc */
text-align: center;
padding-top: 20px;
background-color: white;
position: absolute;
width: 300px;
height: 50px;
left: 70px;
top: -25px;
outline-color: white;
outline-width: 3px;
outline-style: solid;
border-color: rgb(83, 110, 218);
border-width: 3px;
border-style: solid;
}
.tooltip:after,
.tooltip:before {
right: 100%;
top: 50%;
border: solid transparent;
content: " ";
position: absolute;
pointer-events: none;
}
.tooltip:after {
border-color: rgba(136, 183, 213, 0);
border-right-color: white;
border-width: 20px;
margin-top: -20px;
}
.tooltip:before {
border-color: rgba(194, 225, 245, 0);
border-right-color: rgb(83, 110, 218);
border-width: 26px;
margin-top: -26px;
}
<div class="trigger">
<div class="tooltip">
Hello World
</div>
</div>
Or go here: Fiddle
Does anybody know how to accomplish this?
For a pure CSS alternate, you can use the below snippet. It basically uses a double for the border-style of the main rectangle (instead of outline) and a pseudo-element which is rotated by 45 degrees to produce the triangle. The triangle has a border which is the same color as the inner border of the main rectangle (or the body) and a box-shadow which is white in color to produce the double border effect. The pseudo-element is positioned appropriately to make it look as though it is a continuation of the border of the main rectangle.
Note: To modify the thickness of the border, the border-width of parent, border-width of the pseudo-element, the box-shadow on the pseudo-element and the positioning of the pseudo-element should be modified accordingly.
body {
background-color: rgb(83, 110, 218);
}
.trigger {
margin-top: 150px;
position: relative;
width: 30px;
height: 30px;
background-color: #000;
}
.tooltip {
/* Misc */
text-align: center;
padding-top: 20px;
background-color: white;
position: absolute;
width: 300px;
height: 50px;
left: 70px;
top: -25px;
border-color: rgb(83, 110, 218);
border-width: 6px;
border-style: double;
}
.tooltip:before {
left: -11.75px;
top: 35%;
height: 20px;
width: 20px;
border: 2.5px solid rgb(83, 110, 218);
box-shadow: -2px 2px 0px 0px white;
border-right: none;
border-top: none;
content: " ";
background: white;
position: absolute;
pointer-events: none;
transform: rotate(45deg);
}
<div class="trigger">
<div class="tooltip">
Hello World
</div>
</div>
I'd suggest you to use svg.
body {
background: rgb(83, 110, 218)
}
<svg width="300" height="60" viewBox="0 0 300 60">
<path d="M20 5h270v50h-270v-12.5l-10 -12.5l10 -12.5z" fill="white" />
<path d="M16 1h278v58h-278v-15l-11 -14 l11,-14z" fill="none" stroke-width="2.5" stroke="white" />
<text x="150" y="35" text-anchor="middle">Hello World</text>
</svg>
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;
}
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;
}
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.