0

I have the diagonal lines working as per draw diagonal lines in div background with CSS and set as % to be responsive.

Trying to place letter's on the white spaces on each side of intersection of lines. i.e

above, below, left, right of intersection / centre

I can't get it to work.

I then want to set a full page image background slider with text overlay.

Community
  • 1
  • 1
user4869915
  • 1
  • 2

1 Answers1

2

I figured a solution according to your requirement.

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 is here : DEMO

Raj
  • 199
  • 1
  • 1
  • 14