html - 纯粹在 CSS 背景中创建箭头

Question

我需要创建一个 CSS 类，该类可以动态添加到各种空的方形 div 框中，这些框将添加“半 Angular 尖线”，就像下面的示例所示。理想情况下，我只需将 class="arrow_right"添加到 div 即可显示正确的行。仅使用 CSS 可以吗？我不想依赖静态图像来执行此操作，以实现灵活性。谢谢!

Answer 1

这是一个使用背景的想法:

.box {
  width:150px;
  height:150px;
  display:inline-block;
  border:2px solid;
}

.left {
  background:
    linear-gradient(135deg,transparent calc(15px*0.707),black calc(15px*0.707)) 100% calc(50% - 15px/2),
    linear-gradient( 45deg,transparent calc(15px*0.707),black calc(15px*0.707)) 100% calc(50% + 15px/2);
  background-size:50% 15px;
  background-repeat:no-repeat;
}

.right {
  background:
    linear-gradient(-135deg,transparent calc(15px*0.707),black calc(15px*0.707)) 0 calc(50% - 15px/2),
    linear-gradient( -45deg,transparent calc(15px*0.707),black calc(15px*0.707)) 0 calc(50% + 15px/2);
  background-size:50% 15px;
  background-repeat:no-repeat;
}

.top {
  background:
    linear-gradient( 135deg,transparent calc(15px*0.707),black calc(15px*0.707)) calc(50% - 15px/2) 100%,
    linear-gradient(-135deg,transparent calc(15px*0.707),black calc(15px*0.707)) calc(50% + 15px/2) 100%;
  background-size:15px 50%;
  background-repeat:no-repeat;
}
.bottom {
  background:
    linear-gradient( 45deg,transparent calc(15px*0.707),black calc(15px*0.707)) calc(50% - 15px/2) 0,
    linear-gradient(-45deg,transparent calc(15px*0.707),black calc(15px*0.707)) calc(50% + 15px/2) 0;
  background-size:15px 50%;
  background-repeat:no-repeat;
}

<div class="box left">

</div>
<div class="box right">

</div>
<div class="box top">

</div>
<div class="box bottom">

</div>

使用 CSS 变量，您可以优化代码:

.box {
  width:150px;
  height:150px;
  display:inline-block;
  border:2px solid;
}

.arrow {
  --s:15px;  /* Size */
  --c:black; /* Color */
  --g:transparent calc(var(--s)*0.707),var(--c) calc(var(--s)*0.707);
  
  background-image:linear-gradient(var(--a1),var(--g)),linear-gradient(var(--a2),var(--g));
  background-repeat:no-repeat;
}

.left {
  --a1:135deg;
  --a2:45deg;
  background-position: 100% calc(50% - var(--s)/2),  100% calc(50% + var(--s)/2);
  background-size:50% var(--s);
}

.right {
  --a1:-135deg;
  --a2:-45deg;
  background-position: 0 calc(50% - var(--s)/2),  0 calc(50% + var(--s)/2);
  background-size:50% var(--s);
}

.top {
  --a1:135deg;
  --a2:-135deg;
  background-position: calc(50% - var(--s)/2) 100%,  calc(50% + var(--s)/2) 100%;
  background-size:var(--s) 50%;
}
.bottom {
  --a1: 45deg;
  --a2:-45deg;
  background-position: calc(50% - var(--s)/2) 0,  calc(50% + var(--s)/2) 0;
  background-size:var(--s) 50%;
}

<div class="box arrow left">

</div>
<div class="box arrow right" style="--s:20px;--c:red">

</div>
<div class="box arrow top" style="--s:10px;--c:blue">

</div>
<div class="box arrow bottom"  style="--s:30px;--c:green">

</div>