Divs mit gestreiften Hintergrund überlappend

Question

Ich setze einige padding Platzhalter für ein Element mit vier überlagernden <div /> s, die unterschiedliche Positionierung haben.

.top{ 
    position: absolute; 
    left: 0; 
    height: 0; 
    width: 100%; 
    height: {{element.paddingTop}}; 
} 
.right{ 
    position: absolute; 
    right: 0; 
    top: 0; 
    height: 100%; 
    width: {{element.paddingRight}}; 
} 
.bottom{ 
    position: absolute; 
    left: 0; 
    bottom: 0; 
    width: 100%; 
    height: {{element.paddingBottom}}; 
} 
.left{ 
    position: absolute; 
    left: 0; 
    top: 0; 
    height: 100%; 
    width: {{element.paddingLeft}}; 
} 

Jetzt bekomme ich folgendes Problem:

Wie Sie sehen können, die width und height scheinen keine exakte Menge an px zu sein, und da ich nicht alle Elemente Positionierung starten von topleft aber auch manchmal von bottom oder right Ich habe diesen hässlichen Überlappungseffekt.
Ich kann es lösen, indem ich background-attachment: fixed verwende, aber das schneidet Elemente, die außerhalb des Ansichtsfensters sind - so behebt das mein Problem nicht.
Ich weiß, ich könnte topleft als Bezugspunkt für alle 4 <div /> s verwenden und die Werte berechnen, aber ich habe weder die width noch die height des Elements in diesem Moment.

Hier ist eine Geige: https://jsfiddle.net/ad51xae7/

Answer 1

Stellen Sie sicher, background-attachment: fixed zu verwenden, um das Hintergrundmuster Ihrer Polsterelemente auszurichten. Hier ist eine aktualisierte Geige: https://jsfiddle.net/stefanullinger/ghtkkca8/

Sie können ein robusteres Beispiel finden mit hier zu testen: https://jsfiddle.net/stefanullinger/t26r9c74/

Update:

Hier ist ein weiterer Ansatz, um die HTML5-Canvas-Element verwendet wird.

Answer 2

Darf ich vorschlagen, dass Sie von dieser Probe

.outline { 
 
    position: relative; 
 
    width: 300px; 
 
    padding: 25px; 
 
} 
 
.outline:before { 
 
    content: ' '; 
 
    position: absolute; 
 
    left: 0; 
 
    top: 0; 
 
    width: 100%; 
 
    height: 100%; 
 
    z-index: -1; 
 
    background-image: linear-gradient(-45deg, #19d76e 8%, transparent 8%, transparent 50%, #19d76e 50%, #19d76e 58%, transparent 58%, transparent); 
 
    background-size: 6px 6px; 
 
} 
 
.outline:after { 
 
    content: attr(data-text); 
 
    position: absolute; 
 
    left: 0; 
 
    top: 0; 
 
    width: auto; 
 
    height: auto; 
 
    background-color: #19d76e; 
 
    color: white; 
 
    font-size: 13px; 
 
    padding: 1px 2px; 
 
} 
 

 
.outline div{ 
 
    position: relative; 
 
    padding: 10px 5px; 
 
    background: white; 
 
}

<div class="outline" data-text="Label something"> 
 
    <div>Hey there, how does this work?</div> 
 
</div>

beginnen: nd Version mit Rand Bild

Das Bild konnte von natürlich als data:\[<mediatype>\]\[;base64\],<data> eingebettet werden verhindert zusätzliche Anfragen

.outline{ 
 
    position: relative; 
 
    height: 80px; 
 
    width: 240px; 
 
    border-image-slice: 12 12 12 12; 
 
    border-image-width: 12px 12px 12px 12px; 
 
    border-image-repeat: repeat repeat; 
 
    border-image-source: url("https://mdn.mozillademos.org/files/6015/border-image-5.png"); 
 
} 
 

 
.absolute { 
 
    position: absolute; 
 
    left: 40px; 
 
    top: 40px; 
 
    background: yellow; 
 
}

<div class="absolute"> 
 
    Hey there again, better ? 
 
</div> 
 

 
<div class="outline"> 
 
</div>