html - 创建一个没有 svg 的限制矩形(也许)

Question

我想创建如下所示的表单。这是 slider 的元素符号导航。无论如何它可以在没有 svg 的情况下完成(我不介意是否有 SVG 解决方案)并根据容器中有多少子弹进行扩展。

谢谢!

Answer 1

当然有 - 肯定有许多其他(更好的？)方法来完成这项任务。我想象的方式是将图像视为由 3 个主要部分组成，其中一个部分进一步划分。

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

这是一种可能的实现 - 您可能需要更具体地使用您的 css 选择器，因为我使用的草率选择器几乎肯定会破坏您页面中的其他内容(几乎可以肯定地读作“基本保证”)

从输出图像中，您可以看到我打开了浏览器的开发工具 - 注意到元素符号非常“高”吗？我有点作弊 - 真的应该有另一个水平切片用来固定子弹 - 同样是 3 block :左、中和右。也许，每一 block 都被塞进 Angular 落或中间部分。就目前而言，放置在设备“下方”的内容将与元素符号重叠，因为它们已被向下推出容器，使元素符号在页面上的位置低于黑色部分。你可能会用一个简单的 div/span 来伪造它，它什么都不包含，并且设置为与元素符号延伸到其容器底部相同的高度(以像素为单位)。编辑:'固定'(黑客攻击)，紧跟在设备后面的是 20 像素高的 div。 20 像素 = 12 像素用于元素符号和 2 倍的 4 像素填充。

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>

图片 (corner-left.png)

输出(一)

输出(2)