So, i've created a triangle that points up with a background color of#222 using pure CSS.
I want to add a red 1px border to that triangle, but I have no idea how.
.arrow-tip {
width: 0; height: 0;
border-left: 15px solid transparent;
border-right: 15px solid transparent;
border-bottom: 15px solid #222;
}
The only way you could do something like this is to create another arrow just like it and put it behind the first to fake the border like this:
.arrow-tip {
width: 0;
height: 0;
border-left: 15px solid transparent;
border-right: 15px solid transparent;
border-bottom: 15px solid #222;
position: relative;
}
.arrow-tip:after {
content: "";
display: block;
width: 0;
height: 0;
position: absolute;
bottom: -16px;
left: -17px;
z-index: -1;
border-left: 17px solid transparent;
border-right: 17px solid transparent;
border-bottom: 17px solid red;
}
<div class="arrow-tip"></div>
You'll have to play with the dimensions until you get it just right.
You can use the :before and :after sudo selectors to create an arrow shape.
.arrow-tip {
position: relative;
margin-top: 100px;
}
.arrow-tip:after,
.arrow-tip:before {
bottom: 100%;
left: 50%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
}
.arrow-tip:after {
border-color: rgba(0, 0, 0, 0);
border-bottom-color: #222;
border-width: 15px;
margin-left: -15px;
}
.arrow-tip:before {
bottom: -1px;
border-color: rgba(0, 0, 0, 0);
border-bottom-color: red;
border-width: 17px;
margin-left: -17px
}
<div class="arrow-tip"></div>
JsFiddle Example: http://jsfiddle.net/tud0czmq/1/
Related
I'm trying to create an 'easy' button shape with css pseudeo :after/:before class.
I've read some blogs and articles about that, but no shape looked like mine. So I tried it on my own. But this I something, I can't figure out.
button{
height: 50px;
width: 250px;
border: solid 2px #000;
border-bottom: none;
background: orange;
}
button:after{
height: 0;
width: 125px;
content:"";
position: absolute;
border-top: transparent 30px
border-right: solid 2px #000;
}
button:before{
height: 0;
width: 125px;
content:"";
position: absolute;
border-top: transparent 30px
border-left: solid 2px #000;
}
<button>Let's do it</button>
Can someone give me a hint?
You can create this with :before and :after pseudo elements one for border and other one above for orange background.
button {
height: 50px;
width: 250px;
border: solid 2px #000;
border-bottom: none;
background: orange;
position: relative;
}
button:after,
button:before {
border-style: solid;
border-width: 50px 110px 0 140px;
border-color: #FFA500 transparent transparent transparent;
content: '';
position: absolute;
left: -2px;
top: 100%;
}
button:after {
transform: translateY(-1px);
}
button:before {
border-color: black transparent transparent transparent;
}
<button>Let's do it</button>
Not exactly the same size but you can play with the following one:
#pentagon {
margin-top: 45px;
position: relative;
width: 250px;
border-width: 70px 0 0;
border-style: solid;
border-color: orange transparent;
}
#pentagon:after {
content: "";
position: absolute;
height: 0;
width: 0;
top: -30px;
left: 0px;
border-width: 50px 125px 0 125px;
border-style: solid;
border-color: orange white;
}
<div id="pentagon"></div>
You could play with this, it has a border like your image http://www.cssarrowplease.com/
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;
}
Does CSS gives any option to show background image at the corner a transparent.
instead of showing white background in (DEMO)
avoid white area
#octagon {
width: 100px;
height: 100px;
background: red;
position: relative;
margin: 50px auto 0;
}
#octagon:before {
content: "";
position: absolute;
top: 0;
left: 0;
border-bottom: 29px solid red;
border-left: 29px solid red;
border-right: 29px solid #eee;
width: 42px;
height: 0;
}
http://jsfiddle.net/L8JUJ/4/
Working Fiddle
Made small changes and adjustments in margins.
CSS:
body{
background: url(http://placehold.it/350x150&text=FooBar1) repeat;
}
#octagon {
width: 100px;
height: 71px;
background: red;
position: relative;
margin: 99px 10px 0px 100px;
}
#octagon:before {
content: "";
position: absolute;
top: -29px;
left: 0;
border-bottom: 29px solid red;
border-left: 29px solid red;
border-right: 29px solid transparent;
width: 42px;
height: 0;
}
#octagon:before {
content: "";
position: absolute;
top: 0;
left: 0;
border-bottom: 29px solid red;
border-left: 29px solid red;
border-right: 29px solid #eee;
width: 42px;
height: 0;
opacity:0.6;
}
For a transparent border you can modify #octagon:before border-right with
border-right: 29px solid rgba(0,0,0,0.5);
That will not give you the effect you want because in the back there is the element that already has a background color, so the only way to do this and work would be to add some js to your code, such as:
http://jquery.malsup.com/corner/