So erstellen Sie Strichpunkt- und Strichpunkt-Punktlinien und -Rechtecke in CSS

Lesezeit: 2 Minuten

So erstellen Sie Strichpunkt- und Strichpunkt-Punktlinien und Rechtecke wie

img

in CSS, ohne externe Links zu Bildern oder anderem zu verwenden (Inline-Daten-URLs können verwendet werden, wenn es keinen besseren Weg gibt).

https://codepen.io/ibrahimjabbari/pen/ozinB

enthält einige Beispiele wie

hr.style17:after {
    content: '§';
    display: inline-block;
    position: relative;
    top: -14px;
    padding: 0 10px;
    background: #f0f0f0;
    color: #8c8b8b;
    font-size: 18px;
    -webkit-transform: rotate(60deg);
    -moz-transform: rotate(60deg);
    transform: rotate(60deg);
}

. Es verwendet Inhalts- und Rotations-CSS-Eigenschaften, vielleicht können diese verwendet werden.

1641821780 870 So erstellen Sie Strichpunkt und Strichpunkt Punktlinien und Rechtecke in CSS
Temani Afif

Sie können eine Kombination aus versuchen repeating-linear-gradient und radial-gradient

.dash-dot {
  height:50px;
  background:
    radial-gradient(circle at center,#000 2px,transparent 3px) 5px 50%/20px 5px repeat-x,
    repeating-linear-gradient(to right,#000,#000 10px,transparent 10px,transparent 20px) center/100% 3px no-repeat 
}
.dash-dot-dot {
  height:50px;
  background:
    radial-gradient(circle at center,#000 2px,transparent 3px) 0px  50%/30px 5px repeat-x,
    radial-gradient(circle at center,#000 2px,transparent 3px) 10px 50%/30px 5px repeat-x,
    repeating-linear-gradient(to right,#000,#000 10px,transparent 10px,transparent 30px) center/100% 3px no-repeat;
}
<div class="dash-dot"></div>

<div class="dash-dot-dot"></div>

Um ein Rechteck zu erhalten, müssen Sie auf jeder Seite dasselbe wiederholen:

.dash-dot {
  height:210px;
  background:
    /*right*/
    repeating-linear-gradient(to bottom,#000,#000 10px,transparent 10px,transparent 20px) calc(100% - 1px) 0/3px 100% no-repeat,
    radial-gradient(circle at center,#000 2px,transparent 3px) 100% 5px/5px 20px repeat-y,    
    /*left*/
    repeating-linear-gradient(to bottom,#000,#000 10px,transparent 10px,transparent 20px) 1px 0/3px 100% no-repeat,
    radial-gradient(circle at center,#000 2px,transparent 3px)  0 5px/5px 20px repeat-y,
    /*top*/
    repeating-linear-gradient(to right,#000,#000 10px,transparent 10px,transparent 20px) 0 1px/100% 3px no-repeat,
    radial-gradient(circle at center,#000 2px,transparent 3px) 5px 0/20px 5px repeat-x,
    /*bottom*/
    repeating-linear-gradient(to right,#000,#000 10px,transparent 10px,transparent 20px) 0 calc(100% - 1px)/100% 3px no-repeat,
    radial-gradient(circle at center,#000 2px,transparent 3px) 5px 100%/20px 5px repeat-x;
}
<div class="dash-dot"></div>

  • Diese Methode funktioniert nur für Linien. Wie erstelle ich Strich-Punkt- und Strich-Punkt-Punkt-Rechtecke?

    – Andrus

    26. Januar ’19 um 13:48

  • @Andrus check das Update, du musst es nur auf jeder Seite wiederholen

    – Temani Afif

    26. Januar ’19 um 14:01

  • @TemaniAfif, kannst du bitte erklären, was gemeint ist? 5px 50%/20px 5px

    – doğukan

    26. Januar ’19 um 15:10 Uhr

  • @DogukanCavus ist es background-position/background-size so platziert bei 5px 50% (oben links) mit einer Größe von 20px 5px (Breite Höhe) .. Wenn Sie mehr darüber erfahren möchten, wie der Prozentwert in der Hintergrundposition funktioniert, können Sie dies lesen: stackoverflow.com/a/51734530/8620333

    – Temani Afif

    26. Januar ’19 um 15:13

.

306150cookie-checkSo erstellen Sie Strichpunkt- und Strichpunkt-Punktlinien und -Rechtecke in CSS

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy