创建一个遏制的矩形，没有svg（也许）

Question

我想创建如下所示的窗体。这是一个滑块的项目符号导航。无论如何，它可以在没有svg的情况下完成（我不介意是否有SVG解决方案），并根据容器中有多少个子弹进行扩展。

谢谢！

Answer 1

当然有 - 有必然是许多其他（更好？）的方式去了解这个任务。我想象的方式是将图像想象成由3个主要部分组成，其中一个部分被进一步划分。

你有左边部分，中间部分和右边部分。左侧和右侧部分仅使用图像（在右侧部分的X方向上翻转）显示。然而，中间部分由顶部（黑色）和底部（白色）组成。然后，您可以将子弹插入/移出中间部分的底部，并根据需要增加或缩小设备。

这里有一个可能的实现 - 你可能需要对你的css选择器更加具体，因为我用过的马虎几乎肯定会破坏页面中的其他东西（几乎可以肯定地认为是“基本保证”）

从输出图像中，可以看到我已打开浏览器的开发工具 - 注意子弹是如何非常“高”的？我有点欺骗 - 实际上应该有另一个水平切片用于持有子弹 - 再次3件：左，中，右。也许，每一件都被塞进角落或中间部分。就目前而言，放置在装置“下方”的内容将与子弹重叠，因为它们已经被推下，从它们的容器中排出，使得子弹在页面上低于黑色部分。你也许可以用一个简单的div/span来伪造这个东西，它不包含任何东西，并且被设置为与子弹延伸超过其容器底部相同的像素高度。 编辑：'固定'（黑客）与紧跟在设备后面的20像素高分辨率。 20px = 12px的子弹和2x的4px的填充。

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

你可以尝试这样的事情。边框半径的框和两边的两个阴影。你可以调整它。 我的解决方案：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; 
    } 
    }