使用CSS创建不带填充的箭头

Question

使用CSS创建三角形非常容易且是常见的做法，但是否可以以类似的方式创建具有透明背景和仅边框的三角形呢？

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

鉴于三角形通常是通过伪元素和重叠边框等方式制作的，我不知道从哪里开始。如果边框是透明的，这显然是不可能的... 你有任何想法如何实现吗？这是否可行？

- Ben Carey

---

http://codepen.io/jonneal/pen/kptBs - Jakemmarsh

@Jakemmarsh 谢谢您。 - Ben Carey

Answer 1

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

- Praveen Kumar Purushothaman

---

我正要做那件事 :-) - Ben Carey

你可以在一个元素中使用:before和:after伪元素，而不是两个div。 - 6754534367

@098764它们是两个独立的控件！一个用于向下，另一个用于向上。它们不应该一起使用... :) - Praveen Kumar Purushothaman

@PraveenKumar，我以为你把它们当作两个填充的div使用。现在我明白了 :) 这确实是一个不错的解决方案。 - 6754534367

@PraveenKumar 我在下面添加了一个使用伪元素的解决方案。 - 6754534367

Answer 2

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

• 埋头孔: ⌵（U+2335）
• 拉丁大写字母 v： V（U+0056）
• 拉丁小写字母 v： v（U+0076）
• 数学无衬线体大写字母 v： （U+1d5b5）
• 数学无衬线体小写字母 v： （U+1d5cf）
• N元逻辑或： ⋁（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>

- Oriol

---

@PraveenKumar 我同意！:-P。有人知道为什么这个问题被踩了吗？ - Ben Carey

在我看来，Firefox比Chrome更好地显示了 ⌵ 符号，但在Chrome中也看起来不错。 - Oriol

顺便提一下，我使用的是Win10系统和最新版的Chrome浏览器。另外，值得注意的是，Firefox浏览器内置了字符库支持，而Chrome则没有。 - Roko C. Buljan

@RokoC.Buljan 奇怪，对我来说在WinXP上的Chromium 45上可以工作。 - Oriol

@Oriol 我知道这很奇怪，让我看看那个字符的范围...马上回来。 - Roko C. Buljan

Answer 3

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

- Amit

---

我在另一篇帖子上看到了相关的内容，虽然不是我想要的，但还是非常感谢您 :-) - Ben Carey

Answer 4

一个使用伪元素的解决方案。适用于任何类型的元素。

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

- 6754534367

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

- Roko C. Buljan

Answer 6

另一种选择是使用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>

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

- Stewartside