使用CSS创建箭头而不填充

Question

使用CSS创建三角形非常简单且常见，但是可以使用透明背景和边框以类似的方式创建三角形。

这就是我想要创建的内容：

考虑到通常制作三角形的方式，我真的不知道从哪里开始，因为它们依赖于伪元素和重叠边框等。如果边框是透明的，这显然无法完成......

有没有人对如何做到这一点有任何想法？它甚至可能吗？

Answer 1

您可以使用伪元素从此列表中插入字符：

• 埋头孔：⌵（U + 2335）
• 拉丁文大写字母v：V（U + 0056）
• 拉丁文小写字母v：v（U + 0076）
• 数学sans-serif capital v：（U + 1d5b5）
• 数学sans-serif小v：（U + 1d5cf）
• N-ary逻辑或：⋁（U + 22c1）
• 罗马数字五：Ⅴ（U + 2164）
• 小罗马数字五：ⅴ（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>

Answer 2

使用Font-awesome，chevron-down

＆＃13;

＆＃13;

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

.blk .fa {
  color: white;
  margin: 40px 50% auto 50%;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 3

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>

Answer 4

另一种选择可能是使用SVG来创建形状。

.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>

它得到了很好的支持并且相对容易使用。

Answer 5

具有伪元素的解决方案。适用于任何元素。

＆＃13;

＆＃13;

.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;
}

＆＃13;

<a href="#" class="class"></a>

＆＃13;

＆＃13;

＆＃13;