Umrandung mit Farbverlauf von links, oben, unten und rechts

Question

Ich möchte eine Umrandung hinzufügen, die links oben weiß, oben rechts dunkelblau, unten links dunkelgrau und unten rechts hellgrau/hell ist blau, mit einem Gradienten?

Ist dies mit CSS möglich oder soll ich ein Hintergrundbild verwenden?

Answer 1

Sie könnten :before Pseudo-Element und linear-gradient verwenden, um border-like Effekt zu erstellen.

.element { 
 
    background: white; 
 
    position: relative; 
 
    width: 200px; 
 
    height: 150px; 
 
    margin: 50px; 
 
} 
 
.element:before { 
 
    content: ''; 
 
    position: absolute; 
 
    left: -5px; 
 
    top: -5px; 
 
    width: calc(100% + 10px); 
 
    height: calc(100% + 10px); 
 
    background: linear-gradient(45deg, rgba(220, 218, 219, 1) 0%, rgba(255, 255, 255, 1) 42%, rgba(255, 255, 255, 1) 59%, rgba(125, 188, 220, 1) 100%); 
 
    z-index: -1; 
 
}

<div class="element"></div>