Quadrato con angoli arrotondati e bordo curvato rientrato

Question

Mi chiedevo se è possibile creare un quadrato con angoli arrotondati e un bordo rientrato in puro CSS.

Attualmente ho questo:

#custom-square { 
    position: relative; 
    display: block; 
    width: 75px; 
    height: 75px; 
    border: 2px solid #8A6EF1; 
    border-radius: 10px; 
    background-color: white; 
} 

Answer 1

Considerando il fastidio e la quantità di codice necessario per allineare double curves with CSS, SVG sembra modo più appropriato. Alcune altre ragioni per andare per SVG qui sono:

• controllo del percorso (colore, larghezza, curva ...)
• controllo del riempimento con un colore uniforme, gradiente o immagine
• meno codice
• è possibile visualizzarla su un fondo non semplice (gradiente o immagine)
• mantenere i confini della forma per le interazioni degli utenti (passaggio del mouse, fare clic su ...)

Qui è un esempio di base che utilizza inline svg con un path element.
Le curve sono disegnati con Cubic Bezier curves:

svg{width:30%;}

<svg viewbox="0 0 10 10"> 
 
    <path d="M1.5 0.5 Q5 1 8.5 0.5 Q9.5 0.5 9.5 1.5 Q9 5 9.5 8.5 Q9.5 9.5 8.5 9.5 Q5 9 1.5 9.5 Q0.5 9.5 0.5 8.5 Q1 5 0.5 1.5 Q0.5 0.5 1.5 0.5z" 
 
     fill="none" stroke-width="0.2" stroke="#8A6FF2" /> 
 
</svg>

Answer 2

Questo progetto di mock up è così vicino come ho potuto farlo puro CSS, ma richiede ancora un div nidificato. Dovresti modificare il dimensionamento/raggio per le cerchie prima/dopo.

Pen

div { 

    position: absolute; 
    top: 100px; 
    left: 100px; 
    width: 100px; 
    height: 100px; 
    border: 4px solid purple; 
    border-radius: 30px; 
    //overflow: hidden; 
    box-sizing: border-box; 

    &:before { 
    position: absolute; 
    top: -4px; 
    left: -94px; 
    content: ' '; 
    width: 100px; 
    height: 100px; 
    border: 4px solid purple; 
    border-radius: 50px; 
    box-sizing: border-box; 
    background-color: white; 
    clip: rect(0px, 100px, 100px, 90px); 
    } 

    &:after { 
    position: absolute; 
    top: -4px; 
    right: -94px; 
    content: ' '; 
    width: 100px; 
    height: 100px; 
    border: 4px solid purple; 
    border-radius: 50px; 
    box-sizing: border-box; 
    background-color: white; 
    clip: rect(0px, 10px, 100px, 0px); 
    } 
} 

div > div { 
    position: absolute; 
    top: -4px; 
    left: -4px; 
    transform: rotate(90deg); 
    border-color: transparent; 
} 

Answer 3

SVG è probabilmente il modo di andare qui, ma qui è una bella buona approssimazione in puro CSS. Potrebbe essere reso ancora migliore aumentando la dimensione dei cerchi esterni.

#middle { 
 
    width: 96px; 
 
    height: 96px; 
 
    border-radius: 10px; 
 
    background-color: green; 
 
    border: 2px solid #8A6EF1; 
 
} 
 
.outside { 
 
    width: 100px; 
 
    height: 100px; 
 
    position: relative; 
 
    overflow: hidden; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
.cutout { 
 
    width: 96px; 
 
    height: 96px; 
 
    border-radius: 50%; 
 
    background-color: white; 
 
    border: 2px solid #8A6EF1; 
 
} 
 
#top { 
 
    top: -100px; 
 
    height: 10px; 
 
} 
 
#right { 
 
    top: -110px; 
 
    left: 90px; 
 
    width: 10px; 
 
} 
 
#bottom { 
 
    top: -120px; 
 
    height: 10px; 
 
} 
 
#left { 
 
    top: -220px; 
 
    width: 10px; 
 
} 
 
#top > .cutout { 
 
    margin-top: -90px; 
 
} 
 
#left > .cutout { 
 
    margin-left: -90px; 
 
}

<div id="wrapper"> 
 
    <div id="middle"> 
 
    </div> 
 
    <div id="top" class="outside"> 
 
    <div class="cutout"> 
 
    </div> 
 
    </div> 
 
    <div id="right" class="outside"> 
 
    <div class="cutout"> 
 
    </div> 
 
    </div> 
 
    <div id="bottom" class="outside"> 
 
    <div class="cutout"> 
 
    </div> 
 
    </div> 
 
    <div id="left" class="outside"> 
 
    <div class="cutout"> 
 
    </div> 
 
    </div> 
 
</div>

Answer 4

Un altro approccio puro CSS per la creazione di questo confine sarebbe quello di fare uso di border-image proprietà. Tutto ciò che è necessario è creare un'immagine con la forma del bordo richiesta e impostarla su un elemento usando la proprietà border-image-source.

.shape.large { 
 
    height: 300px; 
 
    width: 300px; 
 
    border-image-source: url(http://i.stack.imgur.com/Qkh6A.png); 
 
    border-image-width: 34px; /* the width of the border portions in the image - refer to image at the end of the answer for the exact portion details*/ 
 
    border-image-slice: 34; /* equal to border-image-width */ 
 
    border-width: 34px; /* equal to border-image-width */ 
 
} 
 
.shape.small { 
 
    height: 100px; 
 
    width: 100px; 
 
    border-image-source: url(http://i.stack.imgur.com/Mra4B.png); 
 
    border-image-width: 14px; 
 
    border-image-slice: 14; 
 
    border-width: 14px; 
 
} 
 
.shape.small.fill { 
 
    background: aliceblue content-box; 
 
    border-image-source: url(http://i.stack.imgur.com/Ovj03.png); 
 
    border-width: 14px; 
 
} 
 

 
/* Just for demo */ 
 

 
body { 
 
    background: url(http://lorempixel.com/800/800/abstract/2); 
 
} 
 
.shape.small { 
 
    float: left; 
 
} 
 
.shape.large { 
 
    clear: both; 
 
}

<div class='shape small'>Some content</div> 
 
<div class='shape small fill'>Some content</div> 
 
<div class='shape large'>Some content</div>

Attualmente questo metodo è sicuramente non molto vantaggioso rispetto a SVG ma è un'opzione e, a mio parere è meglio che gli altri CSS unici approcci che sono possibili.

I vantaggi di questo approccio sono:

• codice complessità molto limitata e bassa.
• Controllo migliore delle curve e dei loro raggi (come con SVG) perché l'immagine con la curvatura dei bordi richiesta può essere creata separatamente.
• Può essere posizionato sopra un'immagine o uno sfondo sfumato.
• Può essere fatto degradare con garbo (in un bordo quadrato solido) in browser che non lo supportano.

Il inconvenienti sono:

• Il contenitore rimane un quadrato e quindi hover effetti non sarà limitato ai confini della forma a differenza con SVG.
• L'aggiunta di un riempimento a tinta unita alla forma è possibile (utilizzando una versione riempita dell'immagine) ma l'aggiunta di una sfumatura o di un riempimento dell'immagine è complessa perché i bordi sono ancora blocchi (ovvero, vi sono aree trasparenti su entrambi i lati delle curve).
• L'output è reattivo, ma quando le dimensioni aumentano o diminuiscono oltre una soglia, la forma inizia ad apparire un po 'compressa o allungata. Quindi, questo è più adatto per la progettazione basata su break-point.
• Il browser support non è male, ma non è neanche eccezionale. Funziona in Chrome, Firefox, Safari, Opera e IE11 +.

Calcolo del confine immagine Larghezza:

La larghezza o altezza della zona di confine (che diventa il border-image-width) altro non è che la larghezza della porzione evidenziata nell'immagine sotto.