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.
Related
Unable to select or access to the property of :before & :after element on Edge`s inspect element is there any thing we can do for that?
.arrow_box {
position: relative;
background: #d43959;
border: 4px solid #ac1f3c;
width: 300px;
height:200px;
margin-top:20px;
}
.arrow_box:after, .arrow_box:before {
bottom: 100%;
left: 50%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
}
.arrow_box:after {
border-color: rgba(213, 55, 55, 0);
border-bottom-color: #d53737;
border-width: 20px;
margin-left: -20px;
}
.arrow_box:before {
border-color: rgba(245, 88, 99, 0);
border-bottom-color: #f55863;
border-width: 26px;
margin-left: -26px;
}
<div class="arrow_box"></div>
Codepen link
This snippet working fine but on Microsoft edge I can't access this pseudo element:
.arrow_box:after, .arrow_box:before
The #supports rule allows you to handle your pseudo element on Microsoft Edge.
#supports (-ms-ime-align:auto) {
.selector {
property: value;
}
}
This was previously not a feature supported in Edge, however as of version 16 (currently available in insider builds, and being released on October 17, 2017) this has been added.
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 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;
}
Is it possible to achieve something like this (straight line "cut" with a kind of arrow / triangle 30 pixels from the left) fully in CSS? (did this using adobe fireworks but want to get rid of images as much as possible on my website).
Here is what I have tried without success: http://jsfiddle.net/U8AF6/
Many thanks
CSS
body {
background: red;
}
.arrow_box {
position: relative;
background: #88b7d5;
border: 1px solid #c2e1f5;
}
.arrow_box:after, .arrow_box:before {
top: 100%;
left: 10%;
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: red;
border-width: 16px;
margin-left: -16px;
}
.arrow_box:before {
border-color: rgba(194, 225, 245, 0);
border-top-color: #c2e1f5;
border-width: 22px;
margin-left: -22px;
}
You can use pseudo elements for that.
Please see Nicolas Gallagher's experiment for more: http://nicolasgallagher.com/pure-css-speech-bubbles/demo/
The basic code is:
.triangle:before,
.triangle:after {
content: "";
position: absolute;
bottom: -15px; /* value = - border-top-width - border-bottom-width */
left: 30px;
border-width: 15px 15px 0; /* vary these values to change the angle of the vertex */
border-style: solid;
border-color: #aaa transparent;
}
.triangle:after {
bottom: -14px; /* -1px of first element for border */
border-color: #fff transparent;
}
Please see an implementation here: http://dabblet.com/gist/11146863
This only works on solid background.
it's possible with some css3 transformations(in ways i consider "dirty") and if you want to support older browsers css3 is out of question
here:Fiddle
.bottom-line{
border-bottom:1px solid #999;
}
.bottom-line:after{
content:"";
display:block;
margin-bottom:-8px;
border-right:1px solid #999;
border-bottom:1px solid #999;
-ms-transform: rotate(45deg); /* IE 9 */
-webkit-transform: rotate(45deg); /* Chrome, Safari, Opera */
transform: rotate(45deg);
width:12px;
height:12px;
background-color:#fff;
z-index:200px;
margin-left:100px;
}
also check #drublic's answer.
If you need to support older browsers(pre ie9),your other option is creating a small down arrow picture, place it after some 1px border and give the image an -1px margin so it overlaps the border.
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;
}