Hinzufügen von Rahmen zu dieser "Form"

Ich muss Grenzen zu dieser "Form" hinzufügen. Es ist etwas schwierig, weil die Form mit den nach und vor Pseudo-Elemente gemacht wird. Ich kann den richtigen Weg nicht finden.Hinzufügen von Rahmen zu dieser "Form"

Was muss ich erreichen:

Der Code habe ich bisher:

https://jsfiddle.net/jimmyadaro/xfcjfz3d/

#octagon { 
    width: 300px; 
    height: 200px; 
    background: red; 
    position: relative; 
    -webkit-box-sizing: content-box; 
    -moz-box-sizing: content-box; 
    box-sizing: content-box; 
    display: block; 
} 

#octagon:before, 
#octagon:after { 
    content: ""; 
    position: absolute; 
    left: 0; 
    right: 0; 
} 

#octagon:before { 
    top: 0; 
    border-bottom: 30px solid red; 
    border-left: 30px solid #fff; 
    border-right: 30px solid #fff; 
} 

#octagon:after { 
    bottom: 0; 
    border-top: 30px solid red; 
    border-left: 30px solid #fff; 
    border-right: 30px solid #fff; 
} 

<div id="octagon"></div>

ich mit Schatten versucht, und umreißt ohne Erfolg.

Danke fürs Lesen.

Hinweis: Ich verwende eine solide Hintergrundfarbe, wenn das wichtig ist.

Quelle

2016-10-11 Jimmy Adaro

Dieser Link kann Ihnen helfen http://stackoverflow.com/questions/34641588/how-do-i-give-a-css-octagon-shape- a-full-border – Geeky

Danke @geeky, ich habe gesehen, dass es aussieht, als wäre es nicht skalierbar. Ich meine, es kann nicht 600x200px sein. Zumindest in der Art, wie ich es versucht habe. –

In Verbindung stehend - http://Stackoverflow.com/questions/34644437/how-do-i-add-a-border-to-an-8-point-star-css-shape aber SVG ist hier optimal. –

Nun, das ist der einzige Weg, ich näherte es in reiner CSS denken konnte:

JSfiddle hier: https://jsfiddle.net/xfcjfz3d/7/

body { 
 
    background:#fff; 
 
} 
 

 
#octagon { 
 
    position:relative; 
 
\t width: 300px; 
 
\t height: 200px; 
 
\t background: green; 
 
\t position: relative; 
 
\t -webkit-box-sizing: content-box; 
 
\t -moz-box-sizing: content-box; 
 
\t box-sizing: content-box; 
 
\t display: block; 
 
} 
 

 
#octagon:before, 
 
#octagon:after { 
 
\t content: ""; 
 
\t position: absolute; 
 
\t left: 0; 
 
\t right: 0; 
 
} 
 

 
#octagon:before { 
 
\t top: 0; 
 
\t border-bottom: 30px solid green; 
 
\t border-left: 30px solid #fff; 
 
\t border-right: 30px solid #fff; 
 
} 
 

 
#octagon:after { 
 
\t bottom: 0; 
 
\t border-top: 30px solid green; 
 
\t border-left: 30px solid #fff; 
 
\t border-right: 30px solid #fff; 
 
} 
 

 
.tall { 
 
    position:absolute; 
 
    background:red; 
 
    width:230px; 
 
    height:190px; 
 
    left:35px; 
 
    top:5px; 
 
    z-index:1; 
 
} 
 

 
.wide { 
 
    position:absolute; 
 
    background:red; 
 
    width:290px; 
 
    height:130px; 
 
    left:5px; 
 
    top:35px; 
 
    z-index:1; 
 
} 
 

 
.corner { 
 
    position:absolute; 
 
    background:red; 
 
    width:45px; 
 
    height:43px; 
 
    
 
    z-index:1; 
 
    transform: rotate(45deg); 
 
} 
 

 
.topleft { 
 
    left:14px; 
 
    top:14px; 
 
} 
 

 
.topright { 
 
    //background:black; 
 
    left:241px; 
 
    top:13px; 
 
} 
 

 
.bottomleft { 
 
    background:red; 
 
    left:13px; 
 
    top:143px; 
 
} 
 

 
.bottomright { 
 
    background:red; 
 
    left:241px; 
 
    top:143px; 
 
}

<div id="octagon"> 
 
    <div class="tall"></div> 
 
    <div class="wide"></div> 
 
    <div class="corner topleft"></div> 
 
    <div class="corner topright"></div> 
 
    <div class="corner bottomleft"></div> 
 
    <div class="corner bottomright"></div> 
 
</div>

Quelle

2016-10-11 19:50:05 Varin

Danke, @varin Netter Ansatz, aber scheint nicht skalierbar. Außerdem muss ich Elemente innerhalb der Form hinzufügen (Text, Bilder usw.). Wie auch immer, vielen Dank. –

Hmm. Dies könnte durch verschiedene Einheiten skalierbar gemacht werden.Wenn Sie Elemente im Inneren benötigen, können Sie jederzeit ein weiteres div-Element mit Inhalt und höherem Z-Index hinzufügen. – Varin

Hier ist meine Lösung. Keine feste Hintergrundfarbe ist erforderlich. Dies kann oder kann nicht Ihrem tatsächlichen Anwendungsfall entsprechen.

JSFiddle

#octagon { 
 
    display: flex; 
 
    justify-content: center; 
 
    align-items: center; 
 
    
 
    width: 300px; 
 
    height: 200px; 
 
    overflow: hidden; 
 
    position: relative; 
 
} 
 

 
#octagon:before, 
 
#octagon:after { 
 
    content: ""; 
 
    display: block; 
 
    width: 300px; 
 
    padding-top: 100%; 
 
    position: absolute; 
 
    top: 50%; 
 
    left: 50%; 
 
    transform: translate(-50%, -50%) rotate(45deg); 
 
    z-index: -1; 
 
} 
 
#octagon:before { 
 
    background: red; 
 
} 
 
#octagon:after { 
 
    background: 
 
     linear-gradient(
 
    \t \t 45deg, 
 
\t  \t #0e0 calc(50% - 150px + 10px), transparent 0, 
 
    \t \t transparent calc(50% + 150px - 10px), #0e0 0%), 
 
    \t linear-gradient(
 
    \t \t -45deg, 
 
    \t \t #0e0 calc(50% - 100px + 10px), transparent 0, 
 
    \t \t transparent calc(50% + 100px - 10px), #0e0 0); 
 
    box-shadow: 0 0 0 10px #0e0 inset; 
 
}

<div id="octagon">Hello World!</div>

Quelle

2016-10-11 21:27:18 darrylyeo

Wow @darrylyeo danke für deine Hingabe! Ich schätze das wirklich! Wenn ich eine dünnere Grenze (wie 2px) brauche, wie kann ich das ändern? –

Gut zu helfen, ich habe die Herausforderung genossen! Siehe den letzten Regelsatz '#octagon: after'. Die Diagonalen werden durch 'Box-Shadow' gesteuert und die verbleibenden Seiten werden durch die Prozentsätze in den' linearen-Gradienten' gesteuert. Ich betrachte es irgendwie, aber ich bin mir sicher, dass es einen mathematischeren Weg gibt, diese Werte zu berechnen ('calc()' würde sich als nützlich erweisen). – darrylyeo

Verstanden! Sie müssen jetzt nur alle Instanzen von "10px" ersetzen. – darrylyeo

Hinzufügen von Rahmen zu dieser "Form"

Antwort

Verwandte Themen