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

Question

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

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

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

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

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>

Answer 2

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

• 埋头孔:?(U + 2335)
• 拉丁文大写字母v:V(U + 0056)
• 拉丁文小写字母v:v(U + 0076)
• 数学sans-serif资本v: (U+1d5b5)
• Mathematical sans-serif small 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>