Div obcięty pod skosem

Question

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!

Answer 1

<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ę

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

Pozdrawiam

Comments

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?

---

nie widzę tego zaokrąglenia

---

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.

---

dobry temat ....na osobne pytanie

---

@niezalogowany, Proponuję zmienić: height na 0, no chyba, że chodziło o taki efekt.   (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 */
}

 

---

miał być ucięty ale dzięki

---

@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;
}

 

---

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.

Answer 2

Jeżeli chodzi ci o samego diva to:

https://stackoverflow.com/questions/25387897/how-can-i-skew-one-side-of-a-div-and-then-replicate-it-and-skew-a-different-side

Jeżeli bardziej o jego tło - pokombinuj z linear gradient.

Answer 3

Wczoraj padło wręcz identyczne pytanie: https://forum.pasja-informatyki.pl/545447/czy-cssem-mozna-robic-takie-ukosne-tlo

Comments

ale w dzisiejszej odpowiedzi jest kodu mniej