Html 创建带边框的矩形，不带svg（可能）

我想创建如下所示的表单。这是滑块的子弹导航。不管怎样，没有svg（我不介意是否有svg解决方案）和基于容器中有多少项目符号进行扩展都可以完成

谢谢大家!

---

当然有——完成这项任务肯定会有很多其他（更好的？）方法。我想象的方式是，将图像想象为由3个主要部分组成，其中一个部分被进一步划分

你有左半部，中半部和右半部。左侧和右侧部分仅使用图像显示（右侧部分在X方向翻转）。然而，中间部分由顶部（黑色）和底部（白色）组成。然后，您可以在中间部分的底部插入/移除项目符号，设备将根据需要增长或收缩

这里有一个可能的实现——您可能需要更具体地使用css选择器，因为我使用的草率选择器几乎肯定会破坏页面中的其他内容（读起来几乎肯定是“基本保证”）

从输出图像中，您可以看到我已经打开了浏览器的开发工具-注意到这些项目符号是多么的“高”？我有点作弊——应该有另一个水平的薄片用来装子弹——还是3块：左、中、右。也许，每一块都被塞进角落或中间部分。就目前情况而言，放置在设备“下方”的内容将与项目符号重叠，因为它们已从容器中向下推出，使项目符号在页面上的位置低于黑色部分。你可能会用一个简单的div/span来伪造它，这个div/span不包含任何内容，并且设置为与子弹从容器底部延伸时的像素高度相同。 编辑：“修复”（黑客）与20px高的div，紧接着设备。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>

废话废话

图像（左角.png）

输出（1）

输出（2）

---

你可以试试这样的东西。具有边框半径和两侧阴影的长方体。你可以调整它。 我的解决方案：

---

六羟甲基三聚氰胺六甲醚。。。边界图像？不客气。这是一个值得思考的有趣问题——也谢谢你。：）

#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;
    }
  }