纯粹在 CSS 背景中创建箭头

Question

我需要创建一个 CSS class 可以动态添加到各种空方块 div 框，这些框将添加 "half-width pointed lines" 就像在示例中一样以下。理想情况下，我可以将 class="arrow_right" 添加到 div 中，然后会显示正确的行。这可能只使用 CSS 吗？我宁愿不依赖静态图像来执行此操作以实现灵活性。谢谢！

Answer 1

我已经对左边的代码进行了编码，它带有 3 个嵌套的 div。

<div class="box">
    <div class="arrow">
        <div class="arrow-head"></div>
    </div>
</div>

只需添加 CSS 并编写三个嵌套的 div，然后只需添加类即可在任何位置添加这些箭头框。

.box {
    height: 100px;
    width: 100px;
    border: 4px solid #000;
}
.arrow {
    height: 16px;
    width: 50px;
    background: #000;
    position: relative;
    top: 42px;
    overflow: visible;
}
.arrow-head {
    height: 0;
    width: 0;
    position: relative;
    border-top: 8px solid transparent;
    border-bottom: 8px solid transparent;
    border-left: 8px solid #000;
    left: 50px;
}

Answer 2

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

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

Answer 3

您也可以使用pseudo-elements

.box {
  width:150px;
  height:150px;
  display:inline-block;
  border:2px solid;
  position: relative;
}
.box:before,
.box:after{
  content: "";
  position: absolute;
}
.box.left:before,
.box.right:before{
  width:80px;
  height:12px;
  background: currentcolor;
  top: calc(50% - 6px);/*50% - (height/2)*/
}
.box.right:before{right: 0}
.box.top:before,
.box.bottom:before{
  width:12px;
  height:80px;
  background: currentcolor;
  left: calc(50% - 6px);/*50% - (width/2)*/
}
.box.bottom:before{bottom:0}
.box.top:after{
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 6px solid currentcolor;
  left: calc(50% - 6px);
  top: 80px;
}
.box.right:after{
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  border-right: 6px solid currentcolor;
  right: 80px;
  top: calc(50% - 6px);
}
.box.bottom:after{
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-bottom: 6px solid currentcolor;
  left: calc(50% - 6px);
  bottom: 80px;
}
.box.left:after{
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  border-left: 6px solid currentcolor;
  left: 80px;
  top: calc(50% - 6px);
}
.left {
  color: green;
}

.right {
  color: red;
}

.top {
  color: blue;
}
.bottom {
  color: black;
}

<!-- Box left -->
<div class="box left"></div>
<!-- Box right -->
<div class="box right"></div>
<!-- Box top -->
<div class="box top"></div>
<!-- Box bottom -->
<div class="box bottom"></div>

纯粹在 CSS 背景中创建箭头

Creating arrows purely in CSS backgrounds

html

css

css-shapes