Creazione di una goccia come effetto bordo in css

Question

Ho creato questo disegno del bordo in Photoshop e mi chiedevo se qualcuno potesse darmi qualche indicazione su come ricreare questo usando css.

Answer 1

creando un effetto come questo è sicuramente possibile utilizzare CSS3, ma si avrebbe bisogno di più di un semplice confine per questo.

Nell'esempio seguente, ho utilizzato uno pseudo-elemento con uno sfondo radial-gradient per simulare l'effetto del bordo mostrato in questione. A seconda di quale lato deve avere il bordo, è possibile modificare il posizionamento dello pseudo elemento per ottenere l'effetto.

L'esempio fornito nella risposta ha l'effetto per il bordo superiore. Se lo si desidera per il bordo inferiore, è possibile fare riferimento all'esempio this. Lo stesso può essere ottenuto anche per il bordo sinistro/destro, ma richiederebbe un po 'più di regolazione.

È anche possibile modificare la proprietà background-size per ottenere cerchi più piccoli/più grandi nel bordo. È inoltre possibile produrre un motivo di ellisse anziché un cerchio nel bordo utilizzando la parola chiave ellipse anziché circle nel valore di proprietà radial-gradient.

Punti da notare:

1. Attenzione: sto aggiungendo questa risposta solo per illustrare che questo effetto è possibile creare utilizzando solo CSS3, ma non lo consiglierei per l'utilizzo solo ancora a causa del relativamente lesser browser support for radial-gradients. Puoi usarlo se tutti i browser di destinazione lo supportano.
2. Se hai bisogno di questo effetto bordo su tutti i lati, solo gli pseudo-elementi non bastano. Avresti bisogno di elementi extra per ogni lato e poi posizionali come richiesto.
3. Lo sfondo radial-gradient può anche essere aggiunto direttamente al numero div principale se il bordo è richiesto solo in alto. Ma posizionare/ottenere questo effetto per un bordo inferiore non sarebbe possibile con esso e quindi l'uso di uno pseudo-elemento.
4. border-image la proprietà può essere utilizzata per ottenere lo stesso effetto utilizzando solo i bordi ma ha un supporto ancora minore di radial-gradients (anche IE 10 non lo supporta) e quindi non consigliato/utilizzato.
5. Il codice riportato di seguito è stato testato in Firefox, Chrome, Opera e Safari e dovrebbe funzionare anche in IE 10+ come radial-gradients non sono supportati in IE 9 e meno.

.bordered{ 
 
    position: relative; 
 
    height: 75px; 
 
    width: 100%; 
 
    border-top: 40px solid black; 
 
    background: #EEE; 
 
    padding-top: 10px; 
 
} 
 
.bordered:before{ 
 
    position: absolute; 
 
    content: ''; 
 
    top: 0px; 
 
    height: 8px; 
 
    width: 100%; 
 
    background-size: 12px 12px; 
 
    background-position: -5px -3px; 
 
    background-image: -webkit-radial-gradient(50% 0%, circle, black 50%, transparent 55%); 
 
    background-image: -moz-radial-gradient(50% 0%, circle, black 50%, transparent 55%); 
 
    background-image: radial-gradient(circle at 50% 0%, black 50%, transparent 55%); 
 
}

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

---

campioni correlati:

1. Il metodo per pr l'oduzione di un modello simile a ma con tagli triangolari nella parte inferiore invece di un cerchio è disponibile qui - Making jagged triangle border in CSS.

2. Lo stesso metodo può essere utilizzato per la produzione di un francobollo come il bordo in alto e in basso. Un esempio per questo è disponibile here. C'è anche una domanda e risposta simile here che non avevo mai incontrato prima di pubblicare un campione in questa risposta.

3. Lo stesso metodo può essere utilizzato per produrre un bordo che è l'inverso del bordo di gocciolina anche (come nell'immagine presente sotto). Un esempio per questo è disponibile here.

Answer 2

Oltre a @ risposta di Harry - (che è probabilmente il modo migliore per affrontare questo) ...

Potremmo anche ottenere questo effetto utilizzando la proprietà WebKit text-stroke impostando un tratto spesso su un personaggio come '0'.

Siamo in grado di ottimizzare questo effetto modificando lo spessore del tratto e la dimensione del carattere del carattere.

div{ 
 
    position: relative; 
 
    height: 75px; 
 
    width: 100%; 
 
    border-bottom: 20px solid black; 
 
    background: #EEE; 
 
    padding-top: 10px; 
 
} 
 
div:after{ 
 
    position: absolute; 
 
    content: '00000000000000000000000000000000000000000000000000000000000'; 
 
    font-size: 30px; 
 
    -webkit-text-stroke: 10px black; 
 
    text-stroke: 10px black; 
 
    bottom:-35px; 
 
    left:0; 
 
    width: 100%; 
 
    overflow:hidden; 
 
}

<div>Lorem Ipsum Dolor Sit Amet</div>