使用CSS创建无填充的箭头 [英] Create arrow without fill using CSS

问题描述

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

Creating a triangle using CSS is pretty easy and common practice, but is it possible to create a triangle in a similar way with a transparent background and just a border.

这是我想创建的：

给定三角形通常做的方式，我真的不知道从哪里开始，因为它们依赖于伪元素和重叠的边界等。这显然是不能做的，如果边框是透明的...

Given the way triangles are typically made, I dont really know where to start as they rely on pseudo elements and overlapping borders etc. This obviously cannot be done if the border is transparent...

有没有人有任何想法如何做到这一点？

Does anyone have any ideas of how to do this? Is it even possible?

推荐答案

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

这篇关于使用CSS创建无填充的箭头的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！