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>
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/
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>
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/