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

Ответ 1

Вы можете сделать это примерно так:

<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.

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

Ответ 2

Почти идеальным решением, которое автоматически масштабируется до размеров элемента, было бы использование линейного градиента CSS3, связанного с calc(), как показано ниже. Основным недостатком является, конечно, совместимость. Приведенный ниже код работает в Firefox 25 и Explorer 10 и 11, но в Chrome (я тестировал версии 30 и v32) есть некоторые тонкие проблемы с исчезновением линий, если они слишком узкие. Кроме того, исчезновение зависит от размеров блока - стиль ниже работает для div { width: 100px; height: 100px} div { width: 100px; height: 100px}, но не для div { width: 200px; height: 200px} div { width: 200px; height: 200px} для которого в моих тестах необходимо 0.8px в расчете как минимум на 1.1048507095px для 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%);
}

<textarea class="crossed"></textarea>

Ответ 3

Вы можете использовать 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>

Ответ 4

Все остальные ответы на этот 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>

Ответ 5

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

<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

Ответ 6

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

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

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

Например...

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

Ответ 7

Если вы хотите, чтобы крест был частично прозрачным, наивный подход - сделать цвета linear-gradient полупрозрачными. Но это не очень хорошо из-за альфа-смешения на перекрестке, в результате чего получается алмаз разного цвета. Решение этой проблемы - оставить цвета сплошными, но вместо этого добавить прозрачность в контейнер градиента:

.cross {
  position: relative;
}
.cross::after {
  pointer-events: none;
  content: "";
  position: absolute;
  top: 0; bottom: 0; left: 0; right: 0;
}

.cross1::after {
  background:
    linear-gradient(to top left, transparent 45%, rgba(255,0,0,0.35) 46%, rgba(255,0,0,0.35) 54%, transparent 55%),
    linear-gradient(to top right, transparent 45%, rgba(255,0,0,0.35) 46%, rgba(255,0,0,0.35) 54%, transparent 55%);
}

.cross2::after {
  background:
    linear-gradient(to top left, transparent 45%, rgb(255,0,0) 46%, rgb(255,0,0) 54%, transparent 55%),
    linear-gradient(to top right, transparent 45%, rgb(255,0,0) 46%, rgb(255,0,0) 54%, transparent 55%);
  opacity: 0.35;
}

div { width: 180px; text-align: justify; display: inline-block; margin: 20px; }

<div class="cross cross1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam et dui imperdiet, dapibus augue quis, molestie libero. Cras nisi leo, sollicitudin nec eros vel, finibus laoreet nulla. Ut sit amet leo dui. Praesent rutrum rhoncus mauris ac ornare. Donec in accumsan turpis, pharetra eleifend lorem. Ut vitae aliquet mi, id cursus purus.</div>

<div class="cross cross2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam et dui imperdiet, dapibus augue quis, molestie libero. Cras nisi leo, sollicitudin nec eros vel, finibus laoreet nulla. Ut sit amet leo dui. Praesent rutrum rhoncus mauris ac ornare. Donec in accumsan turpis, pharetra eleifend lorem. Ut vitae aliquet mi, id cursus purus.</div>

Ответ 8

Ответ intrepidis на этой странице с использованием фонового SVG в CSS имеет преимущество в том, что оно хорошо масштабируется до любого размера или соотношения сторон, хотя SVG использует <path> с заливкой, которая не так хорошо масштабируется.

Я только что обновил код SVG, чтобы использовать <line> вместо <path> и добавил векторный эффект non-scaling-stroke чтобы предотвратить масштабирование штрихов с контейнером:

<svg xmlns='http://www.w3.org/2000/svg' version='1.1' preserveAspectRatio='none' viewBox='0 0 100 100'>
  <line x1='0' y1='0' x2='100' y2='100' stroke='black' vector-effect='non-scaling-stroke'/>
  <line x1='0' y1='100' x2='100' y2='0' stroke='black' vector-effect='non-scaling-stroke'/>
</svg>

Вот что зашло в CSS из исходного ответа (с изменением размера HTML):

.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'><line x1='0' y1='0' x2='100' y2='100' stroke='black' vector-effect='non-scaling-stroke'/><line x1='0' y1='100' x2='100' y2='0' stroke='black' vector-effect='non-scaling-stroke'/></svg>");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 100% 100%, auto;
}

<div class="diag" style="width: 200px; height: 150px; border: 1px solid; resize: both; overflow: auto"></div>

Ответ 9

.borders {
    width: 200px;
    height: 100px;
    background-color: black;
    border-width: 40px;
    border-style: solid;
    border-color: red blue green yellow;
}

<div class='borders'></div>