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;
}
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;
}
This question already has answers here:
How do CSS triangles work?
(23 answers)
Closed 7 years ago.
I'm Trying to create a banner with a triangular shape at the end.
.wrapper {
padding: 50px;
font-size: 0px;
line-height: 0%;
width: 0px;
border-top: 20px solid gray;
border-bottom: 20px solid gray;
border-right: none;
}
<div class="wrapper">TEXT HERE</div>
Just helping you out with this as you've tried but it didn't worked as you expected... So basic idea is that we can use CSS pseudo elements to create that effect..
.wrapper {
background: #C3C3C3;
padding: 20px;
font-size: 40px;
font-family: Arial;
text-align: center;
position: relative;
}
.wrapper:after {
content: "";
width: 0;
height: 0;
border-top: 42px solid transparent;
border-bottom: 42px solid transparent;
border-right: 40px solid white;
position: absolute;
right: 0;
top: 0;
}
<div class="wrapper">TEXT HERE</div>
Here, am doing nothing fancy, we are using a pseudo element i.e nothing but a virtual element which doesn't exist in the DOM but we can insert it using CSS and positioning that pseudo element to the right side of your wrapper. This will help you get the ribbon like end. Note that the color of the triangle is hard coded and it's not transparent.
here is the fiddle. https://jsfiddle.net/nileshmahaja/s5egaebr/
I have used :after selector to the wrapper div.
CSS
.wrapper {
padding: 0 50px;
font-size: 0px;
line-height: 0%;
width: 0px;
height:120px;
background:#ddd;
position:relative;
width:500px;
}
.wrapper:after {
content:'';
width: 0px;
height: 0px;
border-top: 60px solid transparent;
border-bottom: 60px solid transparent;
border-right: 60px solid #fff;
position:absolute;
right:0
}
Try this it works
.wrapper {
font-family: arial;
font-size: 12px;
color: white;
background-color: black;
border: 1px solid white;
padding: 8px;
width: 100px;
text-align: center;
position: relative;
}
.wrapper:after {
content: '';
position: absolute;
border-top: 16px solid transparent;
border-bottom: 16px solid transparent;
border-right: 16px solid white;
z-index: 10;
top: 0px;
right: 0px;
}
<div class="wrapper">TEXT HERE</div>
I would like to create this using only CSS. Is this possible? If so, can you guys help me out?
Fairly easy with borders and a pseudo element:
ALL
#button::after {
content: "";
border: 64px solid transparent;
border-top: 12px solid orange;
position: absolute;
top: 29px;
left: 0;
}
DEMO
Try to experiment with this basic button:
.btn {
width: 100px;
height: 30px;
text-align: center;
border: 0;
}
.btn-arrow {
position: relative;
background: coral;
}
.btn-arrow:after {
border: solid transparent;
content:"";
position: absolute;
border-top-color: coral;
border-width: 16px 50px;
left: 0px;
top: 100%;
margin-top: 0px;
}
http://jsfiddle.net/dfsq/tNjCb/1/
how about something like the following:
http://jsfiddle.net/WDCu3/
<div id="test">Testing</div>
<div id="arrow"></div>
#test {background-color:red; width:100px;}
div {text-align:center;}
#arrow {
border-top: 15px solid red;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
height: 0;
width:0;
}
I have a box with a triangle that intersects it and I'd like a similar triangle to be cut out from the box so there is a white gap between the two. As this is a little hard to explain I created a jsFiddle here that shows what I have already.
Here is a screenshot
HTML
<div id="alertdetails">
<h2>UH OH</h2>
Date: 05/11/2012 15:57:46
<br><br>
View
</div>
<div id="arrow-right"></div>
CSS
#alertdetails {
background-color: #F8F8F8;
border: 1px solid #CCCCCC;
border-radius: 5px 5px 5px 5px;
left: 25px;
padding: 20px;
position: absolute;
text-shadow: 0 1px #FFFFFF;
top: 15px;
}
#arrow-right {
position: absolute;
top: 45px;
left: 15px;
width: 0;
height: 0;
border-top: 20px solid transparent;
border-bottom: 20px solid transparent;
border-left: 20px solid #303030;
}
You can do this without the extra DIV for the arrow by using a UTF-8 "right arrow" and the :before pseudo class. This will give you a little more control over the style of the arrow.
#alertdetails {
background-color: #F8F8F8;
border: 1px solid #CCCCCC;
border-radius: 5px 5px 5px 5px;
left: 25px;
padding: 20px;
position: relative;
margin-top:15px;
text-shadow: 0 1px #FFFFFF;
}
#alertdetails::before {
content:"\25b6";
position:absolute;
top:20px;
left:-20px;
font-size:60px;
color:#ffffff;
}
You just need to add a second triangle that is slightly bigger.
HTML
<div id="alertdetails">
<h2>UH OH</h2>
Date: 05/11/2012 15:57:46
<br><br>
View
</div>
<div id="arrow-white"></div>
<div id="arrow-right"></div>
CSS
#alertdetails {
background-color: #F8F8F8;
border: 1px solid #CCCCCC;
border-radius: 5px 5px 5px 5px;
left: 25px;
padding: 20px;
position: absolute;
text-shadow: 0 1px #FFFFFF;
top: 15px;
}
#arrow-right {
position: absolute;
top: 45px;
left: 15px;
width: 0;
height: 0;
border-top: 20px solid transparent;
border-bottom: 20px solid transparent;
border-left: 20px solid #303030;
}
#arrow-white{
position: absolute;
top: 44px;
left: 15px;
width: 0;
height: 0;
border-top: 21px solid transparent;
border-bottom: 21px solid transparent;
border-left: 22px solid #ffffff;
}