Диагональная линия через <div> или <span>

Я хочу иметь диагональную линию, нарисованную в верхнем правом углу <div> или <span> в левом нижнем углу. Проблема в том, что контент иногда будет длиннее или короче. Итак, что-то вроде статического изображения не будет работать. В принципе, я хочу, что описано здесь (Как создать диагональную линию внутри ячейки таблицы?), но для <div> или <span>.

У этого есть несколько интересных идей: http://jsfiddle.net/zw3Ve/11/

Так делает следующее: http://css-tricks.com/forums/discussion/13384/diagonal-line/p1

Это повторение на этом посту: Как нанести наклон через css

Похоже, я не могу понять этого. Кажется, что чистое решение CSS должно работать здесь, но у меня просто нет навыков, чтобы это произошло. jQuery - это вариант для меня.

Ответ 1

Является первым скриптом в качестве примера с изображением в фоновом режиме, а не достаточно хорошим?

http://jsfiddle.net/zw3Ve/410/

.line {
    display:inline-block;
    border: 1px solid #ccc;
    margin: 10px;
    padding: 10px;
    background:url(http://i.piccy.info/i7/c7a432fe0beb98a3a66f5b423b430423/1-5-1789/1066503/lol.png);
    background-size:100% 100%;
}

Ответ 2

Вы можете сделать это с помощью встроенного фона SVG, используя только CSS и javascript.

.background {
   // Draw an SVG top left to bottom right 
   background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' version='1.1' preserveAspectRatio='none' viewBox='0 0 10 10'> <path d='M0 0 L0 10 L10 10' fill='red' /></svg>");
   background-repeat:no-repeat;
   background-position:center center;
   //scale it 
   background-size: 100% 100%, auto;
}

Смотрите мою скрипку:

http://jsfiddle.net/3GWw2/

Ответ 3

Вы можете использовать SVG-изображение, подобное этому:

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1 Tiny//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11-tiny.dtd">
<svg version="1.1" baseProfile="tiny" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
 x="0px" y="0px" width="200px" height="50px" viewBox="0 0 200 50">
    <line fill="none" stroke="#000" x1="0" y1="0" x2="200" y2="50"/>
</svg>

Установите его как фон вашего диапазона или div

.class-of-div-or-span { background: url("line.svg") no-repeat scroll 0 0 / 100% 100% transparent; }

Примечание. Чтобы работать, вы должны предоставить свой диапазон display:block или display:inline-block.

Вы также можете встроить svg, использовать его в теге объекта или вставить его в свой css.

Ответ 4

На самом деле речь идет скорее о геометрии, чем о кодировании. С квадратами это легко, но с прямоугольниками вам придется самому заниматься математикой. Помните тех детей, которые жалуются, что им никогда не придется вычислять диагональную длину в "реальной жизни"?:П Вот что я сделал:

div.container /*makes a square container (300x300)*/
{
width: 300px;
height: 150px;
background-color: #aaa;
padding-top: 150px;
}
div.line
{
position: relative;
z-index: 1;
left: -61px; /*this is something I don't understand but apparently is required*/
width: 423px; /*since container is a square this equals to its diagonal: 300*1.41*/
height: 1px;
background-color: #000;
transform: rotate(45deg); /*again, this is easy since its a square. In rectangle you'll have to find a tangent*/
-ms-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
}

HTML:
<div class="container">
<div class="line"></div>
</div>

и jsfiddle: http://jsfiddle.net/LWAKn/

Ответ 5

Вы можете сделать это с помощью линейного градиента. Например, если мне нужен зеленый и белый квадрат, который разрезается по диагонали снизу слева направо, я даю ему этот фоновый атрибут:

background: linear-gradient(to bottom right, white, white 50%, green 50%, green);

Это означает, что он начинается с белого цвета в верхнем левом углу и продолжает белым вплоть до диагональной линии. Переход осуществляется от белого до зеленого без фактического градиента, поскольку оба параметра установлены на уровне 50%. Если вам нужна серая линия между ними, вы можете попробовать следующее:

background: linear-gradient(to bottom right, white, white 48%, gray 48%, gray 52%, green 52%, green);