Ben Carey Ben Carey - 21 days ago 5
CSS Question

Create arrow without fill using CSS

Creating a triangle using CSS is pretty easy and common practice, but is it possible to create a triangle in a similar way with a transparent background and just a border.

This is what I would like to create:

Scroll Triangle

Given the way triangles are typically made, I dont really know where to start as they rely on pseudo elements and overlapping borders etc. This obviously cannot be done if the border is transparent...

Does anyone have any ideas of how to do this? Is it even possible?

Answer

Use transform:

div {
  border: 1px solid #000;
  border-width: 0 0 2px 2px;
  width: 10px;
  height: 10px;
  line-height: 0;
  font-size: 0;
  -webkit-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  transform: rotate(-45deg);
}
div:first-child {
  margin-bottom: 25px;
  -webkit-transform: rotate(135deg);
  -ms-transform: rotate(135deg);
  -o-transform: rotate(135deg);
  transform: rotate(135deg);
}
<div></div>
<div></div>