CODEWITHSUNDEEP
htmlcsscss-shapes
Ben Carey
Ben Carey

Reputation: 16958

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?

Upvotes: 8

Views: 6563

Answers (6)

Hardcodepunk
Hardcodepunk

Reputation: 6652

A solution with pseudo-elements. Appliable to any kind of element.

.class:before {
  content: "";
  width: 15px;
  height: 3px;
  background-color: black;
  display: inline-block;
  transform: rotate(45deg);
}
.class:after {
  content: "";
  width: 15px;
  height: 3px;
  background-color: black;
  display: inline-block;
  transform: rotate(-45deg);
  margin-left: -7px;
}
<a href="#" class="class"></a>

Upvotes: 1

Stewartside
Stewartside

Reputation: 20905

Another alternative could be to use SVG to create the shape.

.scroll_down {
  box-sizing: border-box;
  width: 150px;
  height: 90px;
  background: black;
  padding: 5px;
  text-align: center;
}
.scroll_down p {
  font-family: sans-serif;
  color: white;
}
<div class="scroll_down">
  <p>Scroll Down</p>
  <svg width="20px" height="10px" viewBox="0 0 20 10">
    <path fill="none" stroke-width="2" stroke="white" d="M1,1 L10,9 L19,1"></path>
  </svg>
</div>

It's well supported and relatively easy to use.

Upvotes: 0

Praveen Kumar Purushothaman
Praveen Kumar Purushothaman

Reputation: 167182

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>

Upvotes: 13

Roko C. Buljan
Roko C. Buljan

Reputation: 206141

body{background:#000;color:#fff;font: 16px/1 sans-serif;}
h2{text-align:center;}

.arrowDown{
  position:relative;
}
.arrowDown:after{
  content: "";
  position:absolute;
  left:         50%;
  bottom:     -16px;
  width:       16px;
  height:      16px;
  margin-left: -8px; /* (16/2) */
  border-right:  3px solid #fff;
  border-bottom: 3px solid #fff;
  transform: rotate(45deg);
}
<h2 class="arrowDown">Scroll down</h2>

Upvotes: 0

Oriol
Oriol

Reputation: 288220

You can use a pseudo-element to insert a character from this list:

  • Countersink: āŒµ (U+2335)
  • Latin capital letter v: V (U+0056)
  • Latin small letter v: v (U+0076)
  • Mathematical sans-serif capital v: š–µ (U+1d5b5)
  • Mathematical sans-serif small v: š— (U+1d5cf)
  • N-ary logical or: ā‹ (U+22c1)
  • Roman numeral five: ā…¤ (U+2164)
  • Small roman numeral five: ā…“ (U+2174)

div {
  display: inline-block;
  background: #000;
  color: #fff;
  text-transform: uppercase;
  font-family: sans-serif;
  font-size: 150%;
  padding: .75em;
}
div:after {
  content: 'āŒµ';
  display: block;
  text-align: center;
  font-size: 125%;
}
<div>Scroll down</div>

Upvotes: 5

Amit
Amit

Reputation: 46323

Use Font-awesome, chevron-down

.blk {
  width: 150px;
  height: 60px;
  background-color: black;
}

.blk .fa {
  color: white;
  margin: 40px 50% auto 50%;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<div class="blk">
<i class="fa fa-chevron-down"></i>
</div>

Upvotes: 1

Related Questions