我希望使用 CSS 在网格列之间绘制多条线。下面是我写的代码。
.stats {
grid-column: full-start/full-end;
padding: 10% 15%;
position: relative;
}
.stats__img {
position: absolute;
left: -13%;
top: 16%;
width: 26%;
}
.stats__number {
display: grid;
place-items: center center;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: repeat(2, 10rem);
}
.stats__number_img {
position: relative;
top: -10%;
height: 25rem;
grid-column: 1 / 2;
grid-row: 1 / 3;
justify-self: end;
}
.stats__number_svg {
height: 7rem;
width: 7rem;
}
.stats__number_svg.star_svg {
width: 16rem;
height: 16rem;
filter: none;
}
.stats__number_svg.review_svg {
width: 9rem;
height: 9rem;
filter: none;
}
.stats__number_text {
font-size: 1.6rem;
font-weight: 700;
text-align: center;
line-height: 1.6;
}
.stats__number_text_main {
font-weight: 700;
font-size: 2.4rem;
display: block;
}
.stats__number_text.download_text {
grid-column: 2/3;
grid-row: 2/3;
}
.stats__number_text.star_text {
grid-column:3/4;
grid-row:2/3;
}
.stats__number_text.review_text {
grid-column:4/5;
grid-row:2/3;
}