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ć?
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ć?
Z tego, co się orientuję, najlepszym rozwiązaniem do tego będzie canvas
("płótno").
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.
Właśnie o takie coś mi chodziło :) Dzięki za pomoc :)