Ścinanie rogów pod kątem 45 stopni

Zmagam się z problemem ścięciem rogów diva pod kontem np. 45 stopni

transform: rotate(45deg);

Nie pomoże bo przekształca całego diva a tekst w divie chciałbym zostawić w orientacji pionowej nie kursywie

clip-path: polygon();

Spotkałem jeszcze coś takiego ale ustawienie tego tak jak bym chciał nie jest takie proste

Div w mojej koncepcji ma wyglądać tak:

https://css-tricks.com/the-shapes-of-css/#aa-parallelogram-shape

Nie pomoże bo przekształca całego diva a tekst w divie chciałbym zostawić w orientacji pionowej nie kursywie

Możesz zrobić osobny div przechylony i w tym samym miejscu (position:absolute) div z tekstem normalnie.

@LukeJL: Dobry pomysł tylko nie wiem czy się sprawdzi w aplikacji, w której chce zastosować gdzie takie divy generują się więcej niż jeden raz i w paru rozmiarach po zastosowaniu transform: skewX(-45deg); div zmienia też swoje położenie lepiej było by dodać jakoś trójkąty prostokątne w rogach

może zwykłe transform: skew ?

demo: https://jsfiddle.net/p59drmn8/

@NewUser2k13: transform: skew psuje rozmiary diva które muszą zostać takie same.
Na razie mam
W klasie która nachodzi na diva.

border-bottom: 20px solid #000;
border-left: 26px solid transparent;
border-right: 26px solid transparent;

background-color: #FFF;

Wszystko spoko tylko "by trzeba odwrócić działanie border-right:" (-26px nie działa) border-top totalnie psuło całość
ponieważ wygląda to teraz tak:

To może tak?
Demo: https://jsfiddle.net/tywc29mg/1/

W internecie dostępne są "clip path generatory" (https://10015.io/tools/css-clip-path-generator), które potrafią wygenerować kształt jaki potrzebujemy

clip-path: polygon(25% 0%, 100% 0%, 75% 100%, 0% 100%);

a przy dodaniu zmiennych CSS możemy to zautomatyzować

div {
  --width: 150px;
  --clip: 25;

  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--width);
  height: 30px;

  padding-left: calc(var(--width) * var(--clip) / 100);
  padding-right: calc(var(--width) * var(--clip) / 100);
  
  color: #fff;
  background: #000;
  clip-path: polygon(calc(var(--clip) * 1%) 0%, 100% 0%, calc((100 - var(--clip)) * 1%)  100%, 0% 100%);
}

I wychodzi nam element jak na zdjęciu

Elo Leo napisał(a):

@NewUser2k13: działa jak najbardziej zostały jeszcze poprawni odnośnie tego gdy tekst jest za długi żeby szybciej pojawiały się "..." teraz tekst myśli że jest cały czas widoczny ignoruję ścięcia

NewUser2k13 napisał(a):

To może tak?
Demo: https://jsfiddle.net/tywc29mg/1/

Jeszcze jedna rzecz wyszła z czasem. Podczas sciągania strony divy zbliżają się do siebie. I pokazał się jeszcze jeden problem. (pierwszy załącznik poniżej)

Jak doprowadzić te rozwiązanie żeby divy się ładnie pokryły?

niestety potrzebuje żeby kiedy divy były daleko siebie to rogi by znikały a gdy będą blisko siebie będą się pokrywać

Ale ten środkowy ma być cały czas ze skosami czy nie?
Wygląda na to że potrzebujesz media-query i warunkowo znikać bordery jednego diva i podmieniać kolory w drugim, chyba że chcesz też zmieniać kąt nachylenia w zależności od stopnia pokrycia

Elo Leo napisał(a):

Tak, wszystkie muszą mieć skosy cały czas. to mają być takie równoległoboki. Myślałem jeszcze o canvasach

Coś takiego może?
https://jsfiddle.net/cytmhuaL/

Musisz mieć stałe szerokości albo min-width na kontenerze żeby to zawsze jakoś wyglądało. Albo chociaż ustalić co ma się stać gdy skosy z treścią się nie będą mieścić i wtedy możesz przez media-query np w ogóle wyłączyć skosy