CSS - 如果我制作两条对 Angular 线以形成 x 有没有办法将文本放置在交点处？

Question

我的对 Angular 线按照 draw diagonal lines in div background with CSS 工作并设置为 % 以响应。

尝试将字母放在线交叉点两侧的空白处。即

十字路口/中心的上方、下方、左侧、右侧

我无法让它工作。

然后我想设置一个带有文本覆盖的整页图像背景 slider 。

Answer 1

我根据您的要求想出了一个解决方案。

HTML:

<div class="crossed">
    <div style="text-align:center;">A</div>
    <div style="float:left;margin-top:1em;">B</div>
    <div style="float:right;margin-top:1em;">C</div>
    <div style="text-align:center;margin-top:4em;">D</div>
</div>

CSS:

.crossed 
{
    width: 100px;
    height: 100px;
    background:linear-gradient(to top left,
           rgba(0,0,0,0) 0%,
           rgba(0,0,0,0) calc(50% - 0.8px),
           rgba(0,0,0,1) 50%,
           rgba(0,0,0,0) calc(50% + 0.8px),
           rgba(0,0,0,0) 100%),
       linear-gradient(to top right,
           rgba(0,0,0,0) 0%,
           rgba(0,0,0,0) calc(50% - 0.8px),
           rgba(0,0,0,1) 50%,
           rgba(0,0,0,0) calc(50% + 0.8px),
           rgba(0,0,0,0) 100%);
}

演示在这里:DEMO