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:

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?

回答1:

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>

回答2:

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>

回答3:

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>

回答4:

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>

回答5:

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>

回答6:

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.

来源：https://stackoverflow.com/questions/31999159/create-arrow-without-fill-using-css

标签

html

css

css3

css-shapes