HTML CSS zadanie

Question

Chciałabym prosić o wskazówkę w jaki sposób wykonać te dwa zadania w HTML i CSS

Comments

A masz coś już napisane ? Czy oczekujesz gotowe rozwiązanie ?

---

To narzędzie powinno pomóc z borderami. Kod pewnie jest już przestarzały, ale powinno nakierować.

https://www.css3maker.com/index.html

Answer 1

CSS Triangle

Propozycja

1.

<div class="box">
  <div class="box-background">
    <div class="title">Lorem Ipsum</div>
    <div class="triangle"></div>
    <div class="description">Lorem Ipsum &mdash; Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source.</div>
  </div>
</div>

* {
  box-sizing: border-box;
}
html, body {
  margin: 0;
  padding: 0;
  background-color: white;
}
.box {
  width: 390px;
  height: 255px;
  background-color: black;
  margin: 1em auto;
  padding: 1em;
}
.box-background {
  position: relative;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: white;
  border-bottom-left-radius: 1em;
  border-bottom-right-radius: 1em;
}
.title {
  position: relative;
  top: 0;
  left: 0;
  width: 55%;
  font: 1.85em "Times New Roman";
  font-weight: bold;
  color: orange;
  padding: 0.3em;
  padding-top: 0.05em;
  margin: 0;
  background-color: black;
}
.triangle {
    position: absolute;
    top: 0;
    width: 0;
    border-bottom: 2.85em solid transparent;
    border-right: 2.2em solid transparent;
    border-left: solid 1.3em black;
}
.title, .triangle {
  display: inline-block;
}
.description {
  font-size: 0.98em;
  width: 100%;
  padding: 0.6em;
}

 

<div class="box">
  <div class="box-background">
    <div class="title">Lorem Ipsum</div>
    <div class="description">Lorem Ipsum &mdash; Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source.</div>
  </div>
</div>

* {
  box-sizing: border-box;
}
html, body {
  margin: 0;
  padding: 0;
  background-color: white;
}
.box {
  width: 390px;
  height: 255px;
  background-color: black;
  margin: 1em auto;
  padding: 1em;
}
.box-background {
  position: relative;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: white;
  border-bottom-left-radius: 1em;
  border-bottom-right-radius: 1em;
}
.title {
  position: relative;
  top: 0;
  left: 0;
  width: 55%;
  font: 1.85em "Times New Roman";
  font-weight: bold;
  color: orange;
  padding: 0.3em;
  padding-top: 0.05em;
  margin: 0;
  background-color: black;
}
.title::after {
  content: '';
  position: absolute;
  top: 0;
  left: 100%;
  width: 0;
  border-bottom: 1.5em solid transparent;
  border-right: 1.8em solid transparent;
  border-left: solid 0.7em black;
}
.description {
  font-size: 0.98em;
  width: 100%;
  padding: 0.6em;
}

 

Comments

To bardzo fajnie, że tak szczegółowo odpowiedziałeś, ale prawdopodobnie właśnie odrobiłeś za kogoś zadanie domowe lub sprawdzian ;) Sam pytający nawet prosi o "wskazówkę", więc dawanie mu gotowca jest trochę bez sensu - tracisz na to więcej swojego czasu niż na napisanie sugestii jak coś zrobić, a do tego większość pytających (może ten będzie wyjątkiem, nie wiem) po otrzymaniu gotowca nadal niczego się nie nauczy. Osobiście optowałbym bardziej za tym, aby na forum dawać wskazówki, naprowadzać na rozwiązanie, uczyć, sugerować jak zrobić coś jeszcze lepiej, a nie po prostu dać kod, który ktoś sobie bez wysiłku skopiuje, wyśle i dostanie dobrą ocenę. Oczywiście, czasem rzecz jest taka, że nie da się nie pokazać linijki kodu, która jednocześnie coś rozwiązuje. Ale w tym przypadku wygląda to tak, jakbyś odrobił zadanie za kogoś, gdy ten nie włożył w to zupełnie nic, bo nawet nie pokazał co próbował napisać ani czego nie wie.

---

Niestety nie mogę się z Tobą do końca zgodzić @Arkadiusz Waluk,  ponieważ z własnego doświadczenia to piszę, że wielu ciekawych rzeczy nie nauczyłem się tylko z lektury dokumentacji, czy tutorial-i, lecz za pomocą F12 i analizy samego kodu, czy analizy kodu umieszczonego na, np.: github-ie, stack overflow itp. Wpis ma już ponad "tydzień" i dobrze było w Mojej opinii zostawić jakiś ślad i nie twierdze tu, że Moje rozwiązanie jest to jedyne, idealne, zawsze przy takiej liczbie "pasjonatów", może ktoś zrobić review-u i w ten sposób Ja się czegoś nowego może nauczę.  

tracisz na to więcej swojego czasu ...

pisanie kodu? strata czas? Przecież to sama przyjemność.  

---

Tyle że ja nigdzie nie powiedziałem, że nie można uczyć się z analizy kodu albo że Twoje rozwiązanie jest złe. To jasne, że przeglądanie innego kodu rozwija. Powiedziałem tylko, że ktoś zadał pytanie w którym nie podał żadnego kodu, nie opisał żadnego problemu, tylko wkleił treść zadania, a Ty mu dałeś gotowca. Ogólny mechanizm jest taki: skoro ktoś nie pisze nawet z czym jest problem (chociaż słowo którego momentu nie wie jak zrobić), to z wysokim prawdopodobieństwem po prostu nie chce tego sam zrobić. Więc z równie wysokim prawdopodobieństwem analiza kodu przez pytającego skończy się na skopiowaniu zadania, wysłania do nauczyciela i otrzymania dobrej oceny. Ty jedynie wtedy tracisz swój czas (w pewnym sensie, bo wiadomo że sam przy okazji możesz zobaczyć coś nowego) na to, aby za darmo odwalić robotę za kogoś. A dany pytający z kolei za jakiś czas wróci ponownie, z podobnym zadaniem, którego również nie będzie rozumiał i nie będzie chciał zrozumieć wiedząc, że dostał gotowca, więc może i tym razem ktoś znowu zrobi za niego.

Rzecz jasna mogę się mylić w intencjach tej konkretnej osoby (nie chcę tu absolutnie urazić, mówię jak to ogólnie działa) i może to ten wyjątkowy przypadek, gdy ktoś faktycznie nie ogarnia i taki gotowiec mu pomoże szczerze zrozumieć. Nawet w tym konkretnym przypadku padło pytanie o "wskazówki", więc mam nadzieję, że faktycznie nie przyszedł z zamysłem otrzymania gotowca. Jednak to są wyjątki, trochę już tu jestem i (niestety) to pierwszy scenariusz jest standardem :P Jak ktoś się chce czegoś nauczyć to zadaje normalne pytanie, tzn. wskazuje z czym jest problem, a nie wkleja samą treść zadania. No a my jesteśmy forum z zamysłem wspólnego rozwoju pasji, a nie maszynką do odrabiania zadań za innych.