Jak zrobić kreski w Css

Question

Cześć, czy ktoś wie jak zrobić takie kreseczki w css, jak na zdjęciu poniżej.

Answer 1

Możesz to zrobić za pomocą border-top oraz border-bottom(obawiam się jednak, że miałbyś problemy z długością linii), ewentualnie za pomocą pseudoelementów ::after oraz ::before(tutaj nie będzie z tym problemu).

Comments

ok, dzięki za odpowiedz. Jak używa :before i :after, aby coś takiego zrobić? 

---

masz na przykład taką strukturę w html:

<div class="blok">
treść
</div>

<style>
.blok{
background:red;
width:100px;
height:100px;
}

.blok::after{
display:block;
content:"";
width:100px;
height:3px;
backgroud:green;
}

.blok::before{
display:block;
content:"";
width:100px;
height:3px;
backgroud:green;
}
</style>

Miej na uwadze, że obecnie można stosować równie dobrze zapis :before zamiast ::before - używa się jednak :: aby odróżnić pseudoelement od pseudoklasy.

Answer 2

Możesz użyć  html-owego <hr> https://developer.mozilla.org/pl/docs/Web/HTML/Element/hr (jednak nie możesz)

Lub dodać w css pseudo selektory :before i :after i w nich ostylować taki wygląd :)
Inna rzecz że pewnie przez border przy kombinowaniu też dałoby się to uzyskać, ale z tymi 2 metodami na pewno mniej zabawy :)

Comments

HR - NIE, nie do tego został stworzony.
:before, :after jak najbardziej

---

Dokładnie, hr w html5 nabrał znaczenia sematycznego i nie jest już znacznikiem który może służyć za dekorator.

---

ok, dzięki za odpowiedz. Jak używa :before i :after, aby coś takiego zrobić? 

---

Dzięki za czujność. Zastanawiałem się w sumie nad tym czy tak można i wpadłem ;)
edit// http://blog.eduweb.pl/pseudo-elementy-before-i-after-w-css/ to myślę fajnie objaśni Ci co i jak z :before i after

Answer 3

Jest kilka opcji. Pierwsza: użyj bordera

border-style: solid;
border-color: #9900CC;
border-top-width: 40px;
border-bottom-width: 80px;

Druga: Zrób diva o odpowiednich wymiarach i daj jego background-color na #9900CC;