Przekreślenie diva przekątną linią

Odpowiedz Nowy wątek
2018-06-22 12:16
Młodszy programista
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ć?

Pozostało 580 znaków

2018-06-22 12:58
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:

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


edytowany 6x, ostatnio: Silv, 2018-06-22 13:12

Pozostało 580 znaków

2018-06-22 13:14
Młodszy programista
0

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

Pozostało 580 znaków

Odpowiedz
Liczba odpowiedzi na stronę

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