Erstellen einer unregelmäßigen Umrandung mit CSS überlappenden Farben

Question

Wie würden Sie eine unregelmäßige Umrandung mit variablen Farben wie der im Screenshot erstellen?

hielt ich in einem Grafik-Editor ein Randbild erstellen und dann mit border-image Eigenschaft wie im docs beschrieben.

Allerdings konnte ich mit dieser Technik nicht die Wirkung mehrerer Hintergrundfarben (grau und weiß im Screenshot) erreichen, die in die Grenze "Wellen" eindringen.

Eine andere Lösung wäre, nur den gesamten Hintergrund weiß und grau in Photoshop zu erzeugen, und das einfach auf der Website zu verwenden. Ich wollte das wirklich aus Leistungsgründen vermeiden und würde lieber ein graues Karomusterfragment erzeugen und wiederholen.

Außerdem, wie Sie auf dem Screenshot sehen können, ist das dunkle Fragment ein Bild von einem Karussell - die Bilder werden alle in verschiedenen Farben kommen, so dass ein Rahmenbild auf den Karussellbehälter keine Lösung ist.

Ich würde mich über einen Ratschlag freuen. Vielen Dank.

Answer 1

Mit SVG:

Sie können diese SVG tun. Ich würde sagen, dass es ziemlich komplex ist, weil der Ansatz Muster für die sich wiederholenden Kreise verwendet, eine Maske mit dem Muster als Füllung, um die transparenten Schnitte zu erzeugen. Diese Maske wird dann auf das Bild angewendet, um den vollständigen Effekt zu erzeugen. Dies ist meiner Meinung nach am nächsten zu dem, was Sie wollen und hat auch eine gute Browser-Unterstützung. Es funktioniert gut in IE10 +, Edge, Firefox, Chrome, Opera und Safari.

Es gibt ein paar Punkte zu beachten - (1) Sie müssten Ihr Karussell irgendwie mit SVG image arbeiten, weil sonst die Maske keinen Effekt hat (2) ändert sich der Radius der Kreise wie die Breite des Behälters ändern und so müssten Sie entweder einen Container mit fester Größe verwenden (oder) die Breite des Containers dem Attribut viewBox mit JS zuweisen (oder eine Einstellung finden, um zu verhindern, dass die Radiusänderung eintritt, ich weiß nichts davon).

.masked { 
 
    position: relative; 
 
    height: 175px; 
 
    width: 100%; 
 
    background: linear-gradient(60deg, #EEE 35%, white 35.5%), linear-gradient(300deg, #EEE 35%, white 35.5%); 
 
    background-size: 51% 100%; 
 
    background-repeat: no-repeat; 
 
    background-position: 0% 0%, 100% 0%; 
 
    padding-top: 100px; 
 
} 
 
.masked svg { 
 
    position: absolute; 
 
    top: 0px; 
 
    left: 0px; 
 
    height: 100px; 
 
    width: 100%; 
 
} 
 
path { 
 
    fill: #fff; 
 
} 
 
image { 
 
    mask: url("#mask"); 
 
}

<div class='masked'> 
 
    <svg viewBox='0 0 1200 100' preserveAspectRatio='none'> 
 
    <defs> 
 
     <pattern id="circles" patternUnits="userSpaceOnUse" width="10" height="100"> 
 
     <path d="M0,0 L10,0 10,95 A5,5 0 0,0 0,95 L0,0" /> 
 
     </pattern> 
 
     <mask id="mask"> 
 
     <rect height="100%" width="100%" fill="url(#circles)" /> 
 
     </mask> 
 
    </defs> 
 
    <image xlink:href='http://lorempixel.com/1200/100/nature/1' x="0" y="0" height="100%" width="100%" /> 
 
    </svg> 
 
    Lorem Ipsum Dolor Sit Amet... 
 
</div>

Mit CSS:

Dies kann getan werden, CSS Masken verwenden, aber leider für diese Funktion die Browser-Unterstützung ist schrecklich. Es wird derzeit nur in WebKit-Browsern unterstützt. Wenn andere Browser nicht unterstützt werden müssen, ist dies eine wunderbare Option. Alles, was wir tun müssen, ist einen radialen Farbverlauf (der sich in der X-Achse wiederholt) für die Maske zu erstellen, wie im folgenden Ausschnitt, geben Sie ihm die erforderliche Größe und positionieren Sie es entsprechend.

.masked { 
 
    position: relative; 
 
    height: 175px; 
 
    width: 100%; 
 
    background: linear-gradient(60deg, #EEE 35%, white 35.5%), linear-gradient(300deg, #EEE 35%, white 35.5%); 
 
    background-size: 51% 100%; 
 
    background-repeat: no-repeat; 
 
    background-position: 0% 0%, 100% 0%; 
 
    padding-top: 80px; 
 
} 
 
.masked:before { 
 
    position: absolute; 
 
    content: ''; 
 
    top: 0px; 
 
    height: 80px; 
 
    width: 100%; 
 
    background: url(http://lorempixel.com/1000/100/nature/1); 
 
    -webkit-mask-image: linear-gradient(to bottom, black, black), radial-gradient(circle at 50% 100%, transparent 50%, black 55%); 
 
    -webkit-mask-size: 100% calc(100% - 12px), 12px 12px; 
 
    -webkit-mask-position: 0% 0%, 0px 68px; 
 
    -webkit-mask-repeat: repeat-x; 
 
}

<div class="masked">Lorem Ipsum Dolor Sit Amet</div>