svg（多分）なしのカーブした長方形の作成

Question

私は以下のフォームを作成したいと思います。これはスライダーの弾丸ナビゲーションです。とにかくSVGなしで（SVGソリューションがあれば気にしません）、コンテナ内にいくつの弾があるかに基づいて拡張できますか？

ありがとうございました！

Answer 1

確かにそこにある - このタスクについて移動する他の多数の（？より良い）方法があるようにバインドされています。私が想像したやり方は、イメージが3つの主要なセクションで構成されていると考えることです。その1つはさらに分割されます。

あなたは左の部分、中央の部分、右の部分を持っています。左右の部分は、画像を使用して表示されます（これは右部分のX方向に反転されています）。しかし、中間部分は上（黒）と下（白）で構成されています。弾丸をミドルパーツの底部セクションに挿入/脱着すると、デバイスは必要に応じて拡大または縮小します。

これは1つの可能な実装です - 私が使用した厄介なものはあなたのページの他の部分を壊してしまうので、CSSセレクタでより具体的にする必要があります。

出力画像から、ブラウザのdevtoolsが開いていることがわかります。弾丸がどのように非常に「高」になっているかを確認できますか？私は幾分騙されました - 弾丸を保持するために使用される別の水平スライスが必要です - 再び3個：左、中央、右。おそらく、それぞれの部分がコーナーや中央のセクションに詰め込まれています。それが立っていると、デバイスの下に配置されたコンテンツは、黒い部分よりもページ上に弾が下になるように、コンテナから押し出されているので、弾丸と重なることになります。あなたはおそらく、何も保持しない単純なdiv/spanでこれを偽造することができ、箇条書きがコンテナの底部を越えて延びるようにピクセルで同じ高さに設定されます。 編集：デバイスの直後にある高さ20pxのdivで「固定」（ハッキング）します。弾丸は20px = 12px、4pxパディングは2xロット。

CSS

.tabLeft 
{ 
    background-image: url(corner-left.png); 
    width: 72px; 
    height: 48px; 
} 
.tabRight 
{ 
    background-image: url(corner-left.png); 
    width: 72px; 
    height: 48px; 
    -moz-transform: scaleX(-1); 
    -o-transform: scaleX(-1); 
    -webkit-transform: scaleX(-1); 
    transform: scaleX(-1); 
    filter: FlipH; 
    -ms-filter: "FlipH"; 
} 
.tabMiddle 
{ 
} 
.tabMiddleTop 
{ 
    background-color: black; 
    height: 31px; 
} 
.tabMiddleBot 
{ 
    background-color: white; 
    height: 17px; 
} 
.tabLeft, .tabRight, .tabMiddle 
{ 
    display: inline-block; 
} 
body, div 
{ 
    vertical-align: bottom; 
} 
.bullet 
{ 
    background-color: black; 
    width: 12px; 
    height: 12px; 
    display: inline-block; 
    border-radius: 6px; 
    margin: 4px; 
    margin-top: 17px; 
} 
.active 
{ 
    background-color: red; 
} 

HTML

<div class='tabLeft'>&nbsp;</div><div class='tabMiddle'> 
     <div class='tabMiddleTop'>&nbsp;</div> 
     <div class='tabMiddleBot'><span class='bullet active'></span><span class='bullet'></span><span class='bullet'></span></div> 
    </div><div class='tabRight'>&nbsp;</div> 
<div style='display: block; height: 20px;'>&nbsp;</div> 
<div>BLAH BLAH BLAH BLAH</div> 

画像（コーナーleft.png）

出力（1）

出力（2）

Answer 2

あなたはこのような何かを試すことができます。ボーダー半径と両側の2つの影を持つボックス。あなたはそれを調整することができます。 私の解決策：codepen。

#container { 
    #box { 
     position: absolute; 
     top: -20px; 
     left: 119px; 
     background-color: white; 
     border-radius: 20%; 
     height: 40px; 
     width: 162px; 
    } 
    .shadow { 
     position: absolute; 
     top: -40px; 
     width: 100px; 
     height: 40px; 
     border-radius: 50%; 
    } 
    #shadow1 { 
     left: 22px; 
     box-shadow: 40px 26px 0 0 white; 
    } 
    #shadow2 { 
     right: 22px; 
     box-shadow: -40px 26px 0 0 white; 
    } 
    }