Hi guys I'm trying to code an arrow like this in css, I'e viewed examples on codepen, but now I'm thinking whether it is actually possible?
See Question&Answers more detail:osHi guys I'm trying to code an arrow like this in css, I'e viewed examples on codepen, but now I'm thinking whether it is actually possible?
See Question&Answers more detail:osHere is another trick using only one element and multiple linear-gradient as background and you can adjust the size/position of each arrow individually:
.arrows {
width:300px;
height:100px;
position:relative;
background:
/* For the 3 lines*/
linear-gradient(#000,#000) 10px 25px/2px calc(100% - 30px),
linear-gradient(#000,#000) 50% 0/2px calc(100% - 2px),
linear-gradient(#000,#000) calc(100% - 10px) 25px/2px calc(100% - 30px),
/*for the arrows*/
linear-gradient(to top left,transparent 50%,#000 0%) 10px 100%/10px 10px,
linear-gradient(to top right,transparent 50%,#000 0%) 0px 100%/10px 10px,
linear-gradient(to top left,transparent 50%,#000 0%) calc(50% + 5px) 100%/10px 10px,
linear-gradient(to top right,transparent 50%,#000 0%) calc(50% - 5px) 100%/10px 10px,
linear-gradient(to top left,transparent 50%,#000 0%) 100% 100%/10px 10px,
linear-gradient(to top right,transparent 50%,#000 0%) calc(100% - 10px) 100%/10px 10px;
background-repeat:no-repeat;
}
.arrows:before {
content:"";
position:absolute;
top:20px;
left:10px;
right:10px;
height:8px;
border:2px solid;
border-bottom:none;
border-radius:10px 10px 0 0;
box-sizing:border-box;
}
<div class="arrows"></div>