CSS линия, которая будет расширяться вне экрана

Question

У меня есть изображение, которое имеет линии на обоих концах так:

Я пытаюсь, чтобы сделать линию бесконечной так, независимо от того, сколько я уменьшить похоже, что линия идет от конца экрана без изменения размера изображения.

Я знаю, что могу сделать белую линию с использованием repeat-x, но у меня возникли проблемы с попыткой заставить аутсайт div перекрывать экран, не затрагивая изображение. Я использую bootstrap.

Вот мой код для изображения

<div class="row"> 
       <div class="col-xl-12 hscentertext" style=""> 
       <img src="assets/img/25k.png" class="img-fluid center-block text-xl-center" alt="Responsive image"> 
       <!-- <canvas id="canvas" class="fullonly" width="800" height="133" style="background-color:#D32225"></canvas> --> 
       </div> 
      </div> 

Может кто-то пожалуйста помочь с тем, как я могу добиться этого эффекта?

Answer 1

Вы можете достичь этого, используя 110% на ширине, например, так:

img { 
    position: absolute; 
    width:110% 
    overflow: hidden; 
    } 

Answer 2

Мой ideea чтобы обрезать вам изображение, чтобы быть без границ. После этого использование CSS:

.col-xl-12.hscentertext { 
    width: 100%; 
    border-bottom: 1px solid #fff; 
} 
.img-fluid.center-block.text-xl-center { 
    margin-bottom: -1px; 
} 

Answer 3

Вы можете разрезать изображение в 4-х вертикальных частях:

1) пустое красного пространство + несколько пикселей округлой головы белой горизонтальной линии

2) вертикальной линия ширина 1px для повторения линии в BG

3) основной части с логотипом

4) пустого пространства красного + несколько пикселей округлого хвоста белой горизонтальной линии

, то вы разделить разметку в 5 вертикальных дивы:

1,3,5 с фиксированной шириной и центрированной фоновое изображение

и 2,4 - для "повторения-х" 1-пиксельного BG с шириной: calc (50% - # (логотип + голова + хвост)/2 # px); значение внутри ## рассчитать себя