Jak zedytować tego diva?

Question

Siema, mam zrobiony prostokąt w css, i chciałbym go zedytować tak aby:

chciałbym aby wyglądał tak:

Answer 1

Musisz stworzyc 2 diva i zrobic mniej wiecej tak:

#divZewnetrzny{
position: relative;
width: 100px;
height: 100px;
}
#divWewnetrzny{
position: absolute;
width: 10px;
height: 10px;
left: 0;
top: 0;
background: yellow;
}

Co to trojkata kuknij na ta odpowiedz. https://stackoverflow.com/a/7091927/7055769

Comments

uzyskałem dany efekt ale jak wpisać w ten trójkat tekst bo wychodzi mi coś takiego ;/

---

Daj tekst w span i span tez daj position:absolute i wypozycjonuj. Np left:1px; top:1px; Tekst pojawia sie w ten sposob poniewaz tam jest srodek diva.  Reszta jego granic jest po prostu ukryta

---

div.prostokat{
position: relative;
width: 350px;
height: 200px;
background-color: white;
}
div.prostokatwewnatrz{
    border-color: transparent transparent transparent gold;
    border-style: solid;
    border-width: 0px 40px 40px 40px;
    height: 0px;
    width: 0px;
    text-align: center;
}
span.prostokatwewnatrz
{
    position:absolute;
    left: 15px;
    top: 10px;
}

 

Coś nie smiga albo ja jestem głupi :/

 

---

Dodaj caly kod na codepen. Sprobuje zdebugowac

---

https://codepen.io/Liryk/pen/GxQPZj

---

https://codepen.io/Alex-Iron/pen/xWYmOo

Moj blad. Szczerze nie za bardzo rozumiem czemu tak sie to zachowuje. Gdyby ktos bardziej doswiadczony mogl objasnic to bylbym wdzieczny.

Wydaje mi sie ze position jezeli rodzic ma position absolute to dziecko traktuje tego rodzica jak position relative. Ale nie wiem na 100%

---

@Liryk,

Nadajesz style dla span, którego nie ma w html. Ale gdyby założyć ,że  twój numer 1 to span to i tak nie jest on dzieckiem , tylko wnuczkiem .prostokat Więc ustaw go równorzędnie z .prostokatwewnatrz i będzie się zachowywał tak jak zakładasz.

 

---

Racja. To powinno rozwiazac problem negatywnego left

Answer 2

Użyłbym background-position do ustawieia tła w lewym rogu oraz pseudoelement :after do nadania numeru.