Creating angled shape using CSS - html

Question

Is it possible to create a shape like this using the CSS border?
I saw some other stack overflow posts regarding making some border modifications, but nothing specifically like this. Can someone point me in the right direction?
Thanks

Answer 1

Based on https://css-tricks.com/examples/ShapesOfCSS/:
#base {
background: red;
display: inline-block;
height: 30px;
margin-left: 20px;
margin-top: 55px;
position: relative;
width: 200px;
text-align: center;
}
#base:before {
border-bottom: 15px solid red;
border-left: 100px solid transparent;
border-right: 100px solid transparent;
content: "";
height: 0;
left: 0;
position: absolute;
top: -15px;
width: 0;
}
<div id="base"><span>BACK TO TOP</span></div>
Just modify the width and height for your needs, it is really easy.

Answer 2

You can create this shape using css :before and :after selectors:
#back {
background: #fff;
border:1px solid #333;
display: inline-block;
height: 20px;
margin-left: 20px;
margin-top: 55px;
position: relative;
width: 120px;
text-align: center;
}
#back:before {
border-bottom: 15px solid #fff;
border-left: 60px solid transparent;
border-right: 60px solid transparent;
content: "";
height: 0;
left: 0;
position: absolute;
top: -15px;
width: 0;
z-index:2;
}
#back:after {
border-bottom: 15px solid #333;
border-left: 60px solid transparent;
border-right: 60px solid transparent;
content: "";
height: 0;
left: 0;
position: absolute;
top: -16px;
width: 0 ;
z-index:1;
}
<div id="back"><span>Back to Top</span></div>

Answer 3

Fully adaptive and transparent...
* {
margin: 0;
padding: 0;
}
body {
position: relative;
width: 100vw;
height: 100vh;
background-image: linear-gradient(rgba(0, 0, 0, .7) 0, rgba(0, 0, 0, .7) 100%), url('http://beerhold.it/1024/600');
background-repeat: no-repeat;
background-size: cover;
}
.border-arrow-top {
display: inline-block;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
color: white;
text-align: center;
font-size: 6vh;
text-transform: uppercase;
padding: 0 10vw;
padding-bottom: 2vh;
border: 3px solid white;
border-top: none;
position: relative;
}
.border-arrow-top:before,
.border-arrow-top:after {
content: '';
position: absolute;
top: 0%;
border-top: 3px solid white;
width: 50%;
}
.border-arrow-top:before {
left: 0;
transform-origin: -3px -50%;
/* x-coord: -[size of border] */
transform: skewy(-10deg);
}
.border-arrow-top:after {
right: 0;
transform-origin: calc(100% + 3px) -50%;
/* x-coord: 100% + size of border */
transform: skewy(10deg);
}
<div class="border-arrow-top">
Back to Top
</div>

Answer 4

I had written a tutorial for the same, arrow heads and triangles with CSS which can be read here: http://time2hack.com/2014/10/triangles-and-arrow-heads-css.html.
The trick works on the basis of borders and their colors. The direction in which arrow has to point; border of that side can be 0 and rest of the sides will create the arrow head.
The main role will be of opposite side border; if arrow has to point to top, border-bottom will create the arrow and rest can be transparent and if arrow has to point to bottom, the border-top will be of some color and other will be transparent. Similar is for arrow pointing left and right.
The transparent color will work fine in all browser except IE8 and below; for this you can set the color to the matching background, so that it is not visible.

Answer 5

By customizing the fiddle http://jsfiddle.net/95Xq8/ The given below is the output
Check the fiddle
.arrow-wrap{ width:125px; margin:auto; padding:100px 0;}
.arrow-button {
width: 125px;
height: 50px;
line-height: 50px;
position: relative;
background: #f00;
text-align: center; text-decoration:none; color:#000; display:block;
color:#fff;
}
.arrow-tip {
display: block;
width: 101px;
height: 115px;
margin: 0;
-webkit-transform: rotate(45deg) skew(-18deg,-23deg);
}
.arrow-tip-container {
display: block;
width: 125px;
height: 40px;
position: absolute;
top: -40px;
left: 0px;
overflow: hidden;
}
.arrow-tip-grad {
display: block;
width: 100%;
height: 100%;
background: red;
}
<div class="arrow-wrap">
<a href="#" class="arrow-button">Back to top
<span class="arrow-tip-container">
<span class="arrow-tip">
<span class="arrow-tip-grad"></span>
</span>
</span>
</a>
</div>