使用 CSS 创建没有填充的箭头答案

【问题标题】：Create arrow without fill using CSS使用 CSS 创建没有填充的箭头
【发布时间】：2016-11-16 23:08:22
【问题描述】：

使用 CSS 创建一个三角形是非常简单和常见的做法，但是是否可以以类似的方式创建一个具有透明背景和一个边框的三角形。

这是我想要创建的：

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

有没有人知道如何做到这一点？有可能吗？

【问题讨论】：

codepen.io/jonneal/pen/kptBs
@Jakemmarsh 谢谢

标签： html css css-shapes

【解决方案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>

【讨论】：

正要这样做:-)
有没有办法将两端拉得更远，比如倾斜它们，保持三角形但不是完美的直角。
@Omar 只需更改旋转中的值即可。
@PraveenKumar 以为您将它们用作两个填充的 div。我现在明白了 :) 我确实是不错的解决方案。
@PraveenKumar 我在下面添加了一个带有伪元素的解决方案。

【解决方案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%;
}

&lt;div&gt;Scroll down&lt;/div&gt;

【讨论】：

我不反对。非常感谢，正是我需要的！！ +1
@RokoC.Buljan 即使我正在使用 Chrome。有什么问题？
@PraveenKumar 我同意！ :-P。有人知道为什么这个问题被否决了吗？
IMO Firefox 显示 ⌵ 比 Chrome 更漂亮，但看起来也不错。
顺便说一句，我在 Win10 上。最新的铬。仅供参考 Firefox 具有 Chrome 没有的内置字符库支持。

【解决方案3】：

使用字体真棒，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】：

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

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

&lt;a href="#" class="class"&gt;&lt;/a&gt;

【讨论】：

【解决方案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);
}

&lt;h2 class="arrowDown"&gt;Scroll down&lt;/h2&gt;

【讨论】：

【解决方案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>

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

【讨论】：