нарисуйте диагональные линии в фоне div с помощью CSS

у меня есть div для окна предварительного просмотра

HTML-код:

<div class="preview-content">PREVIEW</div>

CSS:

.preview-content {
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAGklEQVQIW2NkYGD4D8SMQAwGcAY2AbBKDBUAVuYCBQPd34sAAAAASUVORK5CYII=) repeat;
    width: 100%;
    min-height: 300px;
    max-height: 300px;
    line-height: 300px;
    text-align: center;
    vertical-align: middle;
     font-size: 2em;
}

Q: Как добавить диагональные линии в фон div, как на картинке

примечание: с CSS только если это возможно

preview

спасибо заранее

32
background css css-shapes diagonal lines

7 ответов

вы можете сделать что-то вроде этого:

<style>
    .background {
        background-color: #BCBCBC;
        width: 100px;
        height: 50px;
        padding: 0; 
        margin: 0
    }
    .line1 {
        width: 112px;
        height: 47px;
        border-bottom: 1px solid red;
        -webkit-transform:
            translateY(-20px)
            translateX(5px)
            rotate(27deg); 
        position: absolute;
        /* top: -20px; */
    }
    .line2 {
        width: 112px;
        height: 47px;
        border-bottom: 1px solid green;
        -webkit-transform:
            translateY(20px)
            translateX(5px)
            rotate(-26deg);
        position: absolute;
        top: -33px;
        left: -13px;
    }
</style>
<div class="background">
    <div class="line1"></div>
    <div class="line2"></div>
</div>

здесь jsfiddle.

улучшенная версия ответ для ваших целей.

24

почти идеальным решением, которое автоматически масштабируется до размеров элемента, будет использование линейного градиента CSS3, связанного с calc (), как показано ниже. Главным недостатком является, конечно, совместимость. Код ниже работает в Firefox 25 и Explorer 10 и 11, но в Chrome (я тестировал V30 и v32 dev) есть некоторые тонкие проблемы с исчезающими линиями, если они слишком узкие. Кроме того, исчезновение зависит от размеров коробки-стиль ниже работает для div { width: 100px; height: 100px}, но не для div { width: 200px; height: 200px} для который в моих тестах 0.8px в расчетах необходимо заменить хотя бы на 1.1048507095px для диагоналей, которые будут показаны, и даже тогда качество рендеринга линии довольно плохое. Будем надеяться, что эта ошибка Chrome будет решена в ближайшее время.

.crossed {
    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%);
}
71

Вы можете использовать SVG для рисования линий.

.diag {
    background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' version='1.1' preserveAspectRatio='none' viewBox='0 0 100 100'><path d='M1 0 L0 1 L99 100 L100 99' fill='black' /><path d='M0 99 L99 0 L100 1 L1 100' fill='black' /></svg>");
    background-repeat:no-repeat;
    background-position:center center;
    background-size: 100% 100%, auto;
}
<div class="diag" style="width: 300px; height: 100px;"></div>

игры: http://jsfiddle.net/tyw7vkvm

15

все остальные ответы на этот 3-летний вопрос требуют CSS3 (или SVG). Однако это также можно сделать только с хромой старой CSS2:

.crossed {
    position: relative;
    width: 300px;
    height: 300px;
}

.crossed:before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 1px;
    bottom: 1px;
    border-width: 149px;
    border-style: solid;
    border-color: black white;
}

.crossed:after {
    content: '';
    position: absolute;
    left: 1px;
    right: 1px;
    top: 0;
    bottom: 0;
    border-width: 149px;
    border-style: solid;
    border-color: white transparent;
}
<div class='crossed'></div>

объяснение, как и просили:

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

.borders {
    width: 200px;
    height: 100px;
    background-color: black;
    border-width: 40px;
    border-style: solid;
    border-color: red blue green yellow;
}
<div class='borders'></div>

чтобы сделать вещи подходят так, как мы хотим, мы выбираем внутренний прямоугольник с размерами 0 и line_thickness пикселей, а другой с этими размерами наоборот:

.r1 { width: 10px;
      height: 0;
      border-width: 40px;
      border-style: solid;
      border-color: red blue;
      margin-bottom: 10px; }
.r2 { width: 0;
      height: 10px;
      border-width: 40px;
      border-style: solid;
      border-color: blue transparent; }
<div class='r1'></div><div class='r2'></div>

наконец, используйте :before и :after псевдо-селекторы и положение относительное / абсолютное как аккуратный способ вставки границ обоих вышеуказанных прямоугольников поверх друг друга в ваш HTML элемент выбора, чтобы создать диагональный крест. Обратите внимание, что результаты, вероятно, выглядят лучше всего с тонким значением LINE_THICKNESS, таким как 1px.

13

пожалуйста, проверьте следующее.

<canvas id="myCanvas" width="200" height="100"></canvas>
<div id="mydiv"></div>

JS:

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.strokeStyle="red";
ctx.moveTo(0,100);
ctx.lineTo(200,0);
ctx.stroke();
ctx.moveTo(0,0);
ctx.lineTo(200,100);
ctx.stroke();

CSS:

html, body { 
  margin: 0;
  padding: 0;
}

#myCanvas {
  padding: 0;
  margin: 0;
  width: 200px;
  height: 100px;
}

#mydiv {
  position: absolute;
  left: 0px;
  right: 0;
  height: 102px;
  width: 202px;
  background: rgba(255,255,255,0);
  padding: 0;
  margin: 0;
}

jsfiddle

5

вы можете использовать свойство преобразования CSS3:

div
{
transform:rotate(Xdeg);
-ms-transform:rotate(Xdeg); /* IE 9 */
-webkit-transform:rotate(Xdeg); /* Safari and Chrome */
}

Xdeg = ваше значение

например...

вы можете сделать больше div и использовать свойство z-index. Итак, сделайте div с линией и поверните ее.

0

.borders {
    width: 200px;
    height: 100px;
    background-color: black;
    border-width: 40px;
    border-style: solid;
    border-color: red blue green yellow;
}
<div class='borders'></div>
-1