Przekreślenie diva przekątną linią

0

Witam,

Mam taki problem. Chce zrobic diva (zwykły prostokąt) który będzie miał połączone dwa przeciwległe rogi. W ten sposób chcę uzyskać box który będzie wyglądał na przekreślony. Jak to mogę zrobić?

0
  1. Z tego, co się orientuję, najlepszym rozwiązaniem do tego będzie canvas ("płótno").

  2. Jeśli jednak chcesz to zrobić w CSS, można zastosować takie coś:
    HTML:

<div id="outer">
    <div id="inner"></div>
</div>

CSS:

#outer {
    border: 1px solid black;
    width: 200px;
    height: 100px;
    position: absolute;
}
#inner {
    width: 224px;
    height: 1px;
    background-color: black;
    transform: rotate(-26.5deg);
    position: relative;
    top: 50px;
    left: -12px;
}

https://jsfiddle.net/5qndts0f/13/

Wartości własności top oraz left ustaliłem eksperymentalnie.


UPDATE:
3. Możesz też pokombinować z gradientami w CSS, jeśli to wyda Ci się dobre:
HTML:

<div class="crossed"></div>

CSS:

.crossed {
    border: 1px solid black;
    width: 200px;
    height: 100px;
    background: linear-gradient(26.5deg, white 49%, black 50%, white 1%);
}

https://jsfiddle.net/d107f8tj/7/

Oczywiście, ten kąt 26.5deg można obliczyć z długości i szerokości prostokąta, spróbuj nawet funkcją calc w CSS. Ale chyba lepiej w Javascripcie.

0

Właśnie o takie coś mi chodziło :) Dzięki za pomoc :)

1 użytkowników online, w tym zalogowanych: 0, gości: 1