CSS/Html: gestrichelte linie?

meine gestrichelte linie sieht momentan so aus:

aber ich will sie so haben:

Kann mir jemand sagen wie ich das in html bzw css hinbekomme?? Ich will sie nicht mit ganz so großen Abständen zwischen den Strichen, die sollen nur etwas größer sein als oben? Danke

Answer 1

[Niklas]

So klappt - zumindest bei mir:

<div class="stripe"></div>

Und das CSS dazu ist auch denkbar simpel:

.stripe {
  width: 10px;
  border: 1px solid #000;
}

Woher ich das weiß: Studium / Ausbildung

Comments

[anonym1970x]

Das ist doch dann gar nicht mehr gestrichelt?

[anonym1970x]

@anonym1970x

Und ich arbeite mit hr wegen horizontaler Linie, wobei wenn ich dann für eine vertikale Linie div mache es unterschiedlich aussieht.. also von der stärke her

[Niklas]

@anonym1970x

Dann mach es so in etwa:

<div class="stripes">
  <hr>
  <hr>
  <hr>
  <hr>
</div>

.stripes {
  display: flex;
  width: max-content;
}

.stripes hr {
  width: 10px;
  border: 1px solid #000;
  margin-right: 10px;
}

[regex9]

@Niklas

Bitte nicht so. Das hr-Element hat die Bedeutung eines alleinstehenden Trenners.

[anonym1970x]

@regex9

Wie geht das jetzt also? :(

[regex9]

@anonym1970x

Die Antworten vom StackOverflow-Link haben dir nicht weitergeholfen?

[anonym1970x]

@regex9

nein :I

Answer 2

[regex9]

Du meinst die Länge? Hier: https://stackoverflow.com/questions/2771171/control-the-dashed-border-stroke-length-and-distance-between-strokes findest du verschiedene Lösungsansätze.