Wie man ein Snowboard (oder gepresstes Rechteck) geformt div in CSS?

Question

Ich versuche, diese Form zu erhalten: Bisher habe ich this haben. Gibt es eine Möglichkeit, diesen Effekt mit CSS zu erzielen? Ich dachte, ein negativer Radius würde wahrscheinlich funktionieren.

div { 
 
    display: inline-block; 
 
    padding-top: 10px; 
 
    padding-bottom: 10px; 
 
    padding-left: 10px; 
 
    min-width: 200px; 
 
    border-radius:10%/70%; 
 
    background-color: red; 
 
}

<div> 
 
    Board 
 
</div>

Answer 1

Ich mag Sachen wie diese, wie ich immer Chaos um Dinge wie diese zu erstellen. Also hier ist, wie ich es machen würde. Mit :before und :after wir diese Form erstellen können, verwenden wir sie eine Form zu schaffen, auf der Oberseite der div mit der gleichen Farbe wie der Hintergrund zu sitzen. Dadurch wird es wie die gewünschte Form aussehen.

Machen Sie die :before und :after groß und kleiner, um die gewünschte Größe zu erhalten (ändern Sie die Breite und Höhe).

div { 
 
    display: inline-block; 
 
    padding-top: 10px; 
 
    padding-bottom: 10px; 
 
    padding-left: 10px; 
 
    min-width: 200px; 
 
    border-radius: 20px; 
 
    background-color: red; 
 
    position: relative; 
 
} 
 
div:before, 
 
div:after { 
 
    content: ""; 
 
    display: block; 
 
    width: 96%; 
 
    height: 20px; 
 
    border-radius: 50%; 
 
    background: #fff; 
 
    position: absolute; 
 
    margin: auto; 
 
} 
 
div:before { 
 
    top: -17px; 
 
    left: 0; 
 
    right: 0; 
 
} 
 
div:after { 
 
    bottom: -17px; 
 
    left: 0; 
 
    right: 0; 
 
}

<div>Board</div>

Answer 2

#a{position:relative;height:50px;width:100px;background-color:green;border-radius:50%;} 
 
#b{position:relative;top:-48px;left:50px;height:46px;width:100px;background-color:green;} 
 
#c{position:relative;top:-96px;left:100px;height:50px;width:100px;background-color:green;border-radius:50%;}

<div id="a"></div><div id="b"></div><div id="c"></div>

Answer 3

So etwas wie das?

#board-cont{ 
 
    position: relative; 
 
    overflow: hidden; 
 
} 
 
#board-cont .board{ 
 
    display: inline-block; 
 
    padding-top: 10px; 
 
    padding-bottom: 10px; 
 
    padding-left: 10px; 
 
    width: 190px; 
 
    height: 30px; 
 
    border-radius:15%/70%; 
 
    background-color: red; 
 
} 
 
#board-cont .border-top{ 
 
    position: absolute; 
 
    display: inline-block; 
 
    width: 0; 
 
    height: 0; 
 
    line-height: 0; 
 
    border-top: 3.4482758620689653px solid #ffffff; 
 
    border-bottom: 3.4482758620689653px solid #ffffff; 
 
    border-left: 100px solid #ffffff; 
 
    border-right: 100px solid #ffffff; 
 
    border-radius: 100px/3.4482758620689653px; 
 
    left: 0px; 
 
    top: -4px; 
 
} 
 
#board-cont .border-bottom{ 
 
    position: absolute; 
 
    display: inline-block; 
 
    width: 0; 
 
    height: 0; 
 
    line-height: 0; 
 
    border-top: 3.4482758620689653px solid #ffffff; 
 
    border-bottom: 3.4482758620689653px solid #ffffff; 
 
    border-left: 100px solid #ffffff; 
 
    border-right: 100px solid #ffffff; 
 
    border-radius: 100px/3.4482758620689653px; 
 
    left: 0px; 
 
    bottom: 0px; 
 
}

<div id="board-cont"> 
 
    <div class="border-top"></div> 
 
    <div class="border-bottom"></div> 
 
    <div class="board"></div> 
 
</div>

Answer 4

Wie ich im Kommentar sagte, müssen Sie etwas Holz von oben hacken und die Unterseite der Platine. @ Ruddy's Board sieht allerdings viel besser aus.

benutzte ich diese superhohen Radiuswerte wegen der Art, sie sind actualy auf Brettern und Skiern gemessen. Mit Snowboard-Spezifikationen könnten Sie tatsächlich das identische Aussehen/die gleiche Form erreichen.

Das etwa ist so weit wie Sie mit einfachen CSS bekommen können (mit den Zahlen zwicken, natürlich).

Wenn Sie jedoch ein halbtransparentes Objekt benötigen, das über einen (bunten) Hintergrund gelegt werden soll, damit Sie den weißen Radierer nicht verwenden können, sollten Sie einen HTML-Zeichenbereich und einen einfachen JS verwenden .

div { 
 
    display: inline-block; 
 
    padding-top: 10px; 
 
    padding-bottom: 10px; 
 
    padding-left: 10px; 
 
    min-width: 200px; 
 
    border-radius:10%/70%; 
 
    background-color: red; 
 
} 
 
div:before, div:after { 
 
    content: ""; 
 
    background-color: white; 
 
    width: 800px; 
 
    height: 800px; 
 
    display: block; 
 
    border-radius: 800px; 
 
    position: absolute; 
 
    } 
 
div:before { 
 
    margin: -804px 0 0 -307px; 
 
} 
 
div:after { 
 
    margin: 4px 0 0 -307px; 
 
}

<div> 
 
    Board 
 
</div>

Answer 5

dies ein langwieriger Prozess wäre in CSS zu erreichen. Sie könnten eine SVG verwenden stattdessen:

<svg height="150" width="500"> 
 
<ellipse style="fill:lime" ry="50" rx="109" cy="49" cx="220" /> 
 
<ellipse style="fill:white" ry="73" rx="270" cy="-51" cx="214" /> 
 
<ellipse style="fill:white" ry="73" rx="270" cy="151" cx="214" /> 
 
</svg>