Wyśrodkowany obrazek jako border-bottom

0

Witam,
poszukuję sposobu w jaki ustawić obrazek (10x10) jako border-bottom dla danego divu. Chciałbym, aby obrazek był wyśrodkowany i nie powielał się. Reasumując, mam div szerokości 200px. Chcę ustawić obrazek jako border-bottom, w odległości 95px od lewej i prawej strony. Mam nadzieję, że dosyć klarownie to wytłumaczyłem. Proszę o pomoc.
Pozdrawiam
AL.

0

Jeżeli ten div ma stałą wysokość to najprościej będzie z background-image, bo o ile mi wiadomo nie da się lub jest dużo trudniej uzyskać ten efekt z border-image. Można kombinować z border-width: 0 0 10px 0;, ale wyśrodkowanie tego i dobór odpowiedniego jpg byłby trudniejszy. W sumie jeżeli nie znasz wysokości diva, to mozna skorzystać z tego, że jest to element blokowy i stworzyć drugiego diva, na niego nałożyć background i będzie robił jako border-bottom ;)

Zamieszczam demo z dwoma rozważonymi przeze mnie przykładami:
https://jsfiddle.net/68dnnys3/1/

1 użytkowników online, w tym zalogowanych: 0, gości: 1