纯粹在 CSS 背景中创建箭头
Creating arrows purely in CSS backgrounds
我需要创建一个 CSS class 可以动态添加到各种空方块 div 框,这些框将添加 "half-width pointed lines" 就像在示例中一样以下。理想情况下,我可以将 class="arrow_right" 添加到 div 中,然后会显示正确的行。这可能只使用 CSS 吗?我宁愿不依赖静态图像来执行此操作以实现灵活性。谢谢!
我已经对左边的代码进行了编码,它带有 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;
}
这是一个使用背景的想法:
.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>
您也可以使用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 class 可以动态添加到各种空方块 div 框,这些框将添加 "half-width pointed lines" 就像在示例中一样以下。理想情况下,我可以将 class="arrow_right" 添加到 div 中,然后会显示正确的行。这可能只使用 CSS 吗?我宁愿不依赖静态图像来执行此操作以实现灵活性。谢谢!
我已经对左边的代码进行了编码,它带有 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;
}
这是一个使用背景的想法:
.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>
您也可以使用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>