作者：乌鸦bz_371 | 来源：互联网 | 2023-02-10 23:08
如何用纯CSS 绘制一个上下箭头？
这是我使用HTML获得的:
.up-down-arrow {
font-size: 50px;
color: #666;
padding: 0;
margin: 0;
display: inline-block;
}
&＃8597;
但箭头之间的界限太短.我可以再延长一次吗？
理想情况下,这就是我所追求的:
1> andreas..：
单元素解决方案
您可以使用伪元素,CSS三角形和一些定位来实现:
.arrow {
width: 2px;
height: 200px; /* <- adjust your height as you need it */
background: black;
margin: 10px;
position: relative;
}
.arrow::before,
.arrow::after {
content: '';
position: absolute;
left: -9px;
width: 0;
height: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
}
.arrow::before {
top: 0;
border-bottom: 15px solid black;
}
.arrow::after {
bottom: 0;
border-top: 15px solid black;
}
2> web-tiki..：
要使用与示例相同的线条生成上下箭头,我建议使用SVG.您可以将其内联使用,如以下示例所示:
.wrap{
position:relative;
height:70vh;
border-left:1px solid #000;
margin:10vh 50px;
padding:5vh 20px;
}
.arrow {
position:absolute;
left:-5px;
width: 9px;
height: auto;
}
.up{top:-9px;}
.down{bottom:-9px;}
Whatever content you need here
3> Banzay..：
下面是使用箭头炭代码的一个更溶液\027A4用于::before和::after内容.
这些字符的大小已绑定到根字体大小rem及其修改rotate,top并left基于内容字体大小.
.arrow {
position: relative;
width: 3px;
height: 150px;
margin: 20px;
background: tomato;
}
.arrow::before,
.arrow::after {
content: '\027A4';
position: absolute;
font-size: 1.5rem;
color: tomato;
}
.arrow::before {
top: -.9em;
left: -.5em;
transform: rotate(-90deg);
}
.arrow::after {
bottom: -.9em;
left: -.32em;
transform: rotate(90deg);
}
京公网安备 11010802041100号