Question

我想创建下面显示的表单。它是滑块的子弹导航。无论如何它可以在没有svg的情况下完成（如果有SVG解决方案，我不介意）并根据容器中有多少子弹进行扩展。

谢谢！

Answer 1

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

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

这是一个可能的实现 - 您可能需要更加具体地使用您的CSS选择器，因为我使用的草率几乎肯定会破坏您页面中的其他内容（几乎可以读取）当然＆＃34;基本保证＆＃34;）

从输出图片中，您可以看到我已经打开了浏览器的开发工具 - 注意子弹是如何非常高的＆＃39 ;?我有点作弊 - 真的应该有另一个水平切片用于抓住子弹 - 再次3件：左，中，右。也许，每个部分被塞进角落或中间部分。目前，内容位于＆＃39;以下该装置将与子弹重叠，因为它们已被推下，从其容器中向下推，以使子弹位于页面下方而不是黑色部分。你可能用一个简单的div / span来伪造它，它只保留任何东西，并且设置为与子弹延伸超过其容器底部的像素高度相同。编辑：＆＃39;修复＆＃39; （黑客入侵），一个20px高的div，紧跟设备。子弹20px = 12px，4xx填充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>

图片（corner-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;
    }
  }

创建一个有条纹的矩形，没有svg（也许）

2 个答案: