I am using two pseudo elements to create a banner effect on a div, like so:
div { position: relative; width: 200px; background-color: #999; }
div:before, div:after { content: ""; width: 10px; height: 0; display: block; position: absolute; z-index: -1; top: 10px; border-top: 10px solid #666; border-bottom: 10px solid #666; }
div:before { right: -20px; border-right: 10px solid transparent; border-left: 10px solid #333; }
div:after { left: -20px; border-left: 10px solid transparent; border-right: 10px solid #333; }
It works fine in FF, Chrome, Safari & IE9, but no luck with IE8. The two elements with z-index of -1 show above parent. Is there any way to get this to work?
You should try setting a z-index of 1 to div.
Related
I found following css code to create rectangle plus right hand side triangle
div{
position: relative;/*it important to set this to relative to be able to use :before in absolute*/
width: 60px;
height: 40px;
background: red
}
div:before{
content: '';
position:absolute;
left: 100%;
top: 0;
border-top: 20px solid transparent;
border-bottom: 20px solid transparent;
border-left: 20px solid red
}
<div>Play</div>
how should I do the same thing, but only with the outline ?
sample image would be like bellow(number 2 box):
Play around with :after positioned over :before to create border.
div{
position: relative;/*it important to set this to relative to be able to use :before in absolute*/
width: 60px;
height: 40px;
background: white;
border: 1px solid red;
}
div:before{
content: '';
position:absolute;
left: 100%;
top: -1px;
border-top: 21px solid transparent;
border-bottom: 21px solid transparent;
border-left: 21px solid red
}
div:after {
content: '';
position: absolute;
left: 100%;
top: 0;
margin-right: -2px;
border-top: 20px solid transparent;
border-bottom: 20px solid transparent;
border-left: 20px solid white;
}
<div>Play</div>
This question already has answers here:
Speech bubble with arrow
(3 answers)
Closed 7 years ago.
I have a css arrow top that I want to display in the top of the div, like this:
the problem is, the arrow is inside the div...
what is wrong here?
#news {
position:absolute;
min-width: 140px;
min-height:100px;
background: #fff;
color: #000;
border:1px solid #000;
}
#news:before {
content: "";
vertical-align: middle;
margin-left: 70px;
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-bottom: 5px solid black;
}
https://jsfiddle.net/3huzc74a/
Your positioning code was just a little bit off. The best way to position the arrow pseudoelement (thanks to #vals) is to use bottom: 100% along with margin: auto, left: 0, and right: 0. That way your arrow will always stay in the correct position even if you decide to change the arrow's size.
Here is a working live demo:
#bellnews {
position: absolute;
min-width: 140px;
min-height: 100px;
background: #fff;
color: #000;
border: 1px solid #000;
}
#bellnews:before {
content: "";
vertical-align: middle;
margin: auto;
position: absolute;
left: 0;
right: 0;
bottom: 100%;
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-bottom: 5px solid black;
}
<div id=bellnews>
</div>
JSFiddle Version: https://jsfiddle.net/3huzc74a/3/
Using absolute positioning with left:calc(50% - 5px); will always keep it in the middle no matter the width.
Here's a fiddle
#bellnews {
position:relative;
min-width: 140px;
min-height:100px;
background: #fff;
color: #000;
border:1px solid #000;
display:inline-block;
}
#bellnews:before {
content: "";
position:absolute;
bottom:100%;
width: 0;
height: 0;
left:calc(50% - 5px);
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-bottom: 5px solid black;
}
<div id=bellnews>
</div>
Try this one with position relative on parent and absolute on child:
#bellnews {
position:relative;
width: 140px;
height:100px;
background: #fff;
color: #000;
border:1px solid #000;
}
#bellnews:before {
content: "";
position: absolute;
vertical-align: middle;
margin-left: 70px;
width: 0;
height: 0;
top: -5px;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-bottom: 5px solid black;
}
https://jsfiddle.net/3huzc74a/2/
You need to make :before pseudo element absolute .
Then use top to control the position of the pseudo element.
This is a nice tutorial to understand the basics.
Working code
#bellnews {
position: absolute;
min-width: 140px;
min-height: 100px;
background: #fff;
color: #000;
border: 1px solid #000;
width: 100px
}
#bellnews:before {
content: "";
vertical-align: middle;
margin-left: 70px;
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-bottom: 5px solid black;
position: absolute;
top: -5px;
}
<div id=bellnews>
</div>
If you make the position on the #news div relative, and the triangle absolute, it should work.
Updated your fiddle: https://jsfiddle.net/3huzc74a/7/
#bellnews {
position: absolute;
min-width: 140px;
min-height:100px;
background: #fff;
color: #000;
border:1px solid #000;
}
#bellnews:before {
content: "";
position: absolute;
top: -5px;
vertical-align: middle;
margin-left: 70px;
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-bottom: 5px solid black;
}
I need to find a responsive solution to the following code.
HTML:
<span> </span><span> </span><span>YES!</span>
CSS:
span {
color: #bac12d;
background-color: #213d55;
display: inline-block;
position: relative;
margin-right: 10px;
margin-left: 30px;
font-size: 80px;
line-height: 1;
}
span:before {
content: "";
display: inline-block;
border-left: 20px solid transparent;
border-top: 40px solid #213d55;
border-right: 0px solid #213d55;
border-bottom: 40px solid #213d55;
position: absolute;
z-index: -1;
top: 0;
left: -20px;
}
span:after {
content: "";
display: inline-block;
border-left: 20px solid #213d55;
border-top: 40px solid transparent;
border-right: 0px solid transparent;
border-bottom: 40px solid transparent;
position: absolute;
z-index: -1;
top: 0;
right: -20px;
}
span:nth-child(-n+2){
width: 0px;
}
Here is my fiddle:
http://jsfiddle.net/283azx0t/
Is it possible to make it responsive so that it follows font-size?
Yes this is possible with media query. As per the different screen size change the font size and also the background arrow size.
Yes this is possible with EM units.
Here is a rough fiddle:
http://jsfiddle.net/zbetxu8g/1/
Here is something like what you want to do for the approach, but choose better em measurements:
span:before {
...
border-left: 2em solid transparent;
border-top: 4em solid #213d55;
border-right: 0px solid #213d55;
border-bottom: 4em solid #213d55;
...
left: -2em;
}
I wanted to know how to indent text with css without indenting the :before property. I want to show a triangle in the before section then indent the text in just a bit more so the triangle doesn't overlap the text.
If i do a text-indent on the main element, it also indents the :before part too.
.header {
border-bottom: 2px solid red;
color: blue;
position: relative;
}
.header:before {
content: '';
width: 0;
height: 0;
bottom: 0;
position: absolute;
border-right: 20px solid transparent;
border-left: 2px solid red;
border-bottom: 20px solid red;
}
The text-indent works... You just have to tell your pseudo element (since it's absolutelly positioned) to be on left: 0;.
See:
.header {
border-bottom: 2px solid red;
color: blue;
position: relative;
text-indent: 20px;
}
.header:before {
content: '';
width: 0;
height: 0;
bottom: 0;
left: 0;
position: absolute;
border-right: 20px solid transparent;
border-left: 2px solid red;
border-bottom: 20px solid red;
}
<div class="header">test</div>
How do I remove the CSS triangles on main menu items that don't have a sub-menu?
See http://v2.letsfaceitbeauty.ca
I think this is the relevant CSS code and I believe ".has-sub" is the correct selector, but I can't figure out how.
#cssmenu > ul > li:hover:after { /* this is the arrow */
content: '';
display: block;
width: 0;
height: 0;
position: absolute;
left: 50%;
bottom: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-bottom: 10px solid #6796ff;
margin-left: -10px;
}
If you know the css that makes the triangle and the element you want the triangle on, just put those two pieces together, i.e. replace the previous rule with
#cssmenu > ul > li.has-sub:hover:after { /* this is the arrow */
content: '';
display: block;
width: 0;
height: 0;
position: absolute;
left: 50%;
bottom: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-bottom: 10px solid #6796ff;
margin-left: -10px;
}