Applying a mock bottom-border to a rotated div - html

Question

I'm currently using the CSS3 rotate value to give the appearance of an arrowhead for modal boxes. I'm now in a situation where I need to create an full arrowhead with a bottom border. Since this is just a div that's rotated at a 45° angle, applying another border to either of the two sides wouldn't solve the problem.
My first thought was to apply some styling the div's :after pseudo selector and vertically center it. For some reason though it's inheriting the rotate value. I've tried setting the value to none and tried to manually adjusting the rotation angle but to no avail. Any idea on how to get this border to reset horizontally straight?
Through Harry's suggestion I set the angle of the :after selector to -45deg and top value to 50%. The only problem now is that it doesn't fully expand to the left and right of the div. Any ideas?
.arrow {
background-color: transparent;
border-top: 2px solid #c7c7c7;
border-left: 2px solid #c7c7c7;
position: relative;
height: 18px;
width: 18px;
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
.arrow:after {
content: "";
background: #c7c7c7;
display: inline-block;
position: absolute;
top: 50%;
height: 2px;
width: 100%;
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
}
<div class="arrow"></div>

Answer 1

Using CSS Transforms:
You can create a full arrowhead with bottom border using the approach adopted in the below snippet. Here, the arrowhead is created by the :after element while the line at the bottom is created using the parent container. The rotation axis is fixed using the same transform-origin for parent & child.
The shape created using this approach should be able to adapt itself to all dimensions without needing any tweaks to the positioning (hover the arrow in snippet to see it in action).
.arrow {
position: relative;
height: 25px;
width: 25px;
border-bottom: 2px solid #c7c7c7;
}
.arrow:after {
position: absolute;
content: "";
bottom: -1px; /* half of border top */
left: -2px; /* equal to border left */
height: calc(100% / 1.414); /* division by 1.414 because parent has to be larger */
width: calc(100% / 1.414);
border-top: 2px solid #c7c7c7;
border-left: 2px solid #c7c7c7;
transform-origin: left bottom;
transform: rotate(45deg);
}
/* Just for demo */
.arrow { transition: all 1s; }
.arrow:hover { height: 50px; width: 50px; }
<div class="arrow"></div>
Using SVG:
You could also have a look at using SVG for creating such shapes because it is much more easier to do so and the output is also responsive. All we need is one path element which creates the shape by connecting the coordinates provided within the d attribute. The M command moves the pen to the specified coordinate whereas the L command draws line from the previous point to the one specified after the command.
svg {
width: 25px;
height: 18px;
}
path {
stroke: #c7c7c7;
stroke-width: 2;
fill: transparent;
}
/* Just for demo */
svg{ transition: all 1s; }
svg:hover{ width: 50px; height: 36px; }
<svg viewBox='0 0 50 50' preserveAspectRatio='none'>
<path id='arrowhead' d='M0,48 L25,2 50,48z' vector-effect='non-scaling-stroke'/>
</svg>
Using Gradients:
The below approach using linear-gradient which would also work and would require only a single element but it has lesser browser support and is suited only for fixed size containers. Because the gradients use percentage values, bottom border tends to get thicker as container's dimensions change (thus rendering it useless for responsive designs).
.arrow {
position: relative;
height: 18px;
width: 18px;
border-top: 2px solid #c7c7c7;
border-left: 2px solid #c7c7c7;
background: linear-gradient(to left top, transparent 50%, #c7c7c7 50%, #c7c7c7 60%, transparent 60%);
transform: rotate(45deg);
}
/* Just for demo */
.arrow { transition: all 1s; }
.arrow:hover { height: 50px; width: 50px; }
<div class="arrow"></div>