使用 CSS 创建无填充箭头

Question

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

这就是我想要创建的：

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

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

Answer 1

使用超棒的字体，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>

Answer 2

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

Answer 3

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

埋头孔：⌵ (U+2335)
拉丁文大写字母 v：V (U+0056)
拉丁文小写字母 v：v (U+0076)
数学无衬线大写字母 v：</code> (U+1d5b5)</li> <li>数学无衬线小v：<code> (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>

Answer 4

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 5

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

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

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

使用 CSS 创建无填充箭头

Create arrow without fill using CSS

html

css

css-shapes