How can I make this line with doubled arrow?
I've seen a few tutorials that teach you how to create boxes with arrows, however, in my case, none of those tutorials are suitable.
-
best way to do something specific is to use an imageSam Denton– Sam Denton2014-08-27 11:50:26 +00:00Commented Aug 27, 2014 at 11:50
Add a comment
|
3 Answers
First of all, those css3 arrows are more a proof of concept than anything else. You should not use them for serious reasons. Either way, to do this you would have to create the center box, and then use a :before and :after pseudo elements to draw the two arrows. Not going to do the work for you of course though. Only problem is that doing it this way will not include the border, as the border is normally in those tricks an underlying triangle of slightly bigger size. In other words, if you want it including the border it's not possible with a single element anymore and you would need to use two overlapping elements... or just an image or svg.
1 Comment
user2908232
@XandrUu: Wasn't addressing you, but the downvoter ;-)
You can make this using pure css.(Quite easy and simple way which supports all browsers).
HTML
<div class="container">
<span class="arrow-left"></span>
<span class="arrow-right"></span>
</div>
CSS
.container{
width:60%;
height:40px;
background:#ccc;
margin:100px auto;
}
.arrow-right {
width: 0;
height: 0;
border-top: 40px solid transparent;
border-bottom: 40px solid transparent;
border-left: 40px solid #ccc;
float:right;
margin-top:-20px;
margin-right:-40px;
}
.arrow-left {
width: 0;
height: 0;
border-top:40px solid transparent;
border-bottom: 40px solid transparent;
float:left;
border-right:40px solid #ccc;
margin-top:-20px;
margin-left:-40px;
}
Working Fiddle
Update
You can also try to make this with pseudo classes like :before,:after but they have some browser compatibility in IE. (I will not prefer this method but it is an easy way).
1 Comment
XandrUu
thanks for the fast response, I will use this implementation twice to have the border
You could use something like that: http://jsfiddle.net/3hfz8r8r/1/
.arrow {
background: red;
height: 30px;
width: 300px;
margin: 100px auto 0;
position: relative;
-webkit-filter: drop-shadow(1px 1px 1px #000);
}
.arrow:before {
width: 0;
height: 0;
border-top: 40px solid transparent;
border-right: 30px solid red;
border-bottom: 40px solid transparent;
position: absolute;
content: '';
left: -30px;
top: 50%;
-webkit-transform: translatey(-50%);
}
.arrow:after {
width: 0;
height: 0;
border-top: 40px solid transparent;
border-left: 30px solid red;
border-bottom: 40px solid transparent;
position: absolute;
content: '';
right: -30px;
top: 50%;
-webkit-transform: translatey(-50%);
}
with a markup like that:
<div class="arrow"></div>
An example: http://jsfiddle.net/3hfz8r8r/1/
3 Comments
Sam Denton
your example looks like a table
evanzto
@SamDenton Check on chrome I only add webkit prefixes (update the prefixes)
Sam Denton
ah, makes sense, btw, works on ie if you set top on each arrow to -80% instead of 50%