Quadrat mit abgerundeten Ecken und eingerücktem, abgerundetem Rand

Question

Ich frage mich, ob es möglich ist, ein Quadrat mit runden Ecken und einem eingerückten Rand in reinem CSS zu erstellen.

Derzeit habe ich dies:

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

Answer 1

den Aufwand und die Menge an Code double curves with CSS auszurichten erforderlich betrachtet, scheint SVG Weg geeignetere. Ein paar andere Gründe für svg zu gehen sind hier:

• Kontrolle des Pfades (Farbe, Breite, Kurve ...)
• Kontrolle der Füllung mit einer einfachen Farbe, Farbverlauf oder Bild
• weniger Code
• Sie es über einen nicht einfachen Hintergrund (Gradient oder Bild) angezeigt werden kann
• die Grenzen der Form für Benutzer-Interaktionen halten (Hover, klicken ...)

Hier ist ein grundlegendes Beispiel mit einem inline svg mit einem path element.

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

Dieser Entwurf Mock-up ist so nah wie ich es rein CSS bekommen konnte, erfordert aber immer noch eine verschachtelte div:
Die Kurven sind mit Cubic Bezier curves gezogen. Sie müssten die Größe/den Radius für die Vorher/Nachher-Kreise anpassen.

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 ist wahrscheinlich der Weg hier zu gehen, aber hier ist eine ziemlich gute Annäherung in reinem CSS. Es könnte noch besser gemacht werden, indem die äußeren Kreise vergrößert werden.

#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

Ein weiterer reiner CSS Ansatz für diese Grenze zu schaffen Nutzung von border-image Eigentum zu machen wäre. Sie müssen lediglich ein Bild mit der erforderlichen Rahmenform erstellen und es mithilfe der Eigenschaft border-image-source auf ein Element festlegen.

.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>

Derzeit ist diese Methode definitiv nicht viel Vorteil im Vergleich zu SVG aber es ist eine Option, und meiner Meinung nach ist besser als die anderen CSS nur Ansätze, die möglich sind.

Die Vorteile dieses Ansatzes sind:

• Sehr minimal und geringer Komplexität Code.
• Bessere Kontrolle über die Kurven und deren Radien (wie bei SVG), da das Bild mit der erforderlichen Randwölbung separat erstellt werden kann.
• Kann auf einem Bild oder einem Hintergrund mit Farbverlauf platziert werden.
• Kann in Browsern, die es nicht unterstützen, so gestaltet werden, dass es sich (in eine feste quadratische Umrandung) grade abbaut.

Die Nachteile sind:

• Der Behälter noch ein Quadrat ist und so hover Effekte werden nicht an die Grenzen der Form anders als mit SVG eingeschränkt werden.
• Hinzufügen von Volltonfarbe zur Form ist möglich (durch Verwendung einer gefüllten Version des Bildes), aber Hinzufügen eines Farbverlaufs oder Bildfüllung ist schwierig, da Rahmen noch Blöcke sind (das heißt, es gibt transparente Bereiche auf beiden Seiten der Kurven).
• Die Ausgabe reagiert, aber wenn die Abmessungen über einen Schwellenwert hinaus- oder zunehmen, beginnt die Form ein wenig komprimiert oder gestreckt zu wirken. Also, das ist besser geeignet für Break-Point-basiertes Design. Die browser support ist nicht schlecht, aber auch nicht großartig Es funktioniert in Chrome, Firefox, Safari, Opera und IE11 +.

Berechnung der Grenzbildbreite:

die Breite oder die Höhe der Grenzfläche (das die border-image-width wird) ist nichts anderes als die Breite des Teils in dem Bild unten hervorgehoben.