• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

Div obcięty pod skosem

VPS Starter Arubacloud
0 głosów
281 wizyt
pytanie zadane 3 lipca 2021 w HTML i CSS przez Szyszka Gaduła (3,490 p.)

Witam. Mam zwykłego diva:

<div id="oblique">

</div>

I styl dla niego:

#oblique {
    background-color: #202020;
    width: 60%;
    height: 100vh;
}

Problem jest taki, że nie mam pojęcia jak mógł bym go "obciąć" pod skosem, tak jak wygląda na zrobionej przeze mnie przeróbce w Paincie:

Prosił bym o podanie potrzebnych do tego funkcji, oraz z grubsza wytłumaczenie jak one działają. Wielkie dzięki, miłego dnia!

3 odpowiedzi

+2 głosów
odpowiedź 3 lipca 2021 przez niezalogowany
<div id="oblique">
 
</div>
*{
  margin: 0;
  padding: 0;
}


#oblique {
   border-top: 500px solid #202020;
    border-right: 150px solid transparent;
    width: 35%;
    height: 100vh;
}

Jak na moje oko powinno być okay.

Najlepiej się uczy przez zabawę wink

Pobaw się w codepenie wartościami border oraz width aby dostosować kształt diva do Swoich potrzeb.

Pozdrawiam smiley

komentarz 3 lipca 2021 przez Szyszka Gaduła (3,490 p.)
Rozwiązanie ScriptyChrisa działa, ale jestem ciekawy też Twojej propozycji, gdyż zachęcająca w niej jest ilość kodu. Jest tylko taki problem, że to "obcięcie" jest zaokrąglone. Jest na to rada, czy nie?
komentarz 3 lipca 2021 przez niezalogowany

nie widzę tego zaokrąglenia cool

komentarz 3 lipca 2021 przez Szyszka Gaduła (3,490 p.)
edycja 3 lipca 2021 przez Szyszka
Oj, przepraszam. Miałem border-radius w stylach ogólnych (piszę w Angularze). Wielkie dzięki! A czy da się w tym umieścić obraz? W divie oblique.
komentarz 3 lipca 2021 przez niezalogowany

dobry temat ....na osobne pytanie wink

komentarz 3 lipca 2021 przez VBService Ekspert (251,210 p.)

@niezalogowany, Proponuję zmienić: height na 0, no chyba, że chodziło o taki efekt.  wink (tło czerwone dodane dla demonstracji)

<div id="oblique"></div>
<p>Lorem<p>
#oblique {
  border-top: 500px solid #202020;
  border-right: 150px solid red; /* transparent */
  width: 35%;
  height: 0; /* 100vh */
}

 

1
komentarz 3 lipca 2021 przez niezalogowany

miał być ucięty wink ale dzięki

komentarz 3 lipca 2021 przez VBService Ekspert (251,210 p.)

@Szyszka,

A czy da się w tym umieścić obraz? W divie oblique.

spróbuj dodać kontener dla #oblique

<div class="oblique-container">
  <div id="oblique" class="oblique"></div>
  <div class="oblique-img">
    <img src="http://lorempixel.com/300/300/abstract">
  </div>
</div>
* {
  margin: 0;
  padding: 0;
}
.oblique-container {
  position: relative;
  margin: 2em; /* dla demonstarcji - nie wymagany */
}
.oblique-img {
  position: absolute;
  top: 0;
  left: 0;
}
.oblique {
  border-top: 500px solid #202020;
  border-right: 130px solid transparent;
  width: 35%;
  height: 0;
}

 

1
komentarz 3 lipca 2021 przez ScriptyChris Mędrzec (190,190 p.)

Hmm, zastanawiałem się, co ma do rzeczy ustawienie dwóch, przyległych borderów do wizualnego efektu ścięcia. I dopiero po odpaleniu kodu zorientowałem się, że to inspiracja z ułożenia trójkąta z borderów. Sprytne.

0 głosów
odpowiedź 3 lipca 2021 przez CSSoup Mądrala (6,460 p.)
0 głosów
odpowiedź 3 lipca 2021 przez ScriptyChris Mędrzec (190,190 p.)
1
komentarz 3 lipca 2021 przez niezalogowany

ale w dzisiejszej odpowiedzi jest kodu mniej laugh

Podobne pytania

0 głosów
3 odpowiedzi 658 wizyt
pytanie zadane 7 marca 2016 w HTML i CSS przez Sebastian Kopiczko Początkujący (370 p.)
+1 głos
0 odpowiedzi 90 wizyt
pytanie zadane 30 stycznia 2023 w HTML i CSS przez zbiku25 Bywalec (2,940 p.)
+1 głos
2 odpowiedzi 1,420 wizyt

92,452 zapytań

141,262 odpowiedzi

319,079 komentarzy

61,854 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj.

Akademia Sekuraka

Akademia Sekuraka 2024 zapewnia dostęp do minimum 15 szkoleń online z bezpieczeństwa IT oraz dostęp także do materiałów z edycji Sekurak Academy z roku 2023!

Przy zakupie możecie skorzystać z kodu: pasja-akademia - użyjcie go w koszyku, a uzyskacie rabat -30% na bilety w wersji "Standard"! Więcej informacji na temat akademii 2024 znajdziecie tutaj. Dziękujemy ekipie Sekuraka za taką fajną zniżkę dla wszystkich Pasjonatów!

Akademia Sekuraka

Niedawno wystartował dodruk tej świetnej, rozchwytywanej książki (około 940 stron). Mamy dla Was kod: pasja (wpiszcie go w koszyku), dzięki któremu otrzymujemy 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla Pasjonatów! Książka to pierwszy tom z serii o ITsec, który łagodnie wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

...