superwinner superwinner - 3 months ago 7
CSS Question

Creating a curbed rectangular, without svg (maybe)

I would like to create the form shown bellow. It's a bullets navigation for a slider. Is there anyway it can be done without svg (I don't mind if there is a SVG solution) and expand based on how many bullets there are in the container.

Thank you!

enter image description here

Answer

Sure there is - there's bound to be numerous other (better?) ways to go about this task. The way I've imagined, is to think of the image as being made up of 3 main sections, one of which is further divided.

You've a left part, a middle part and a right part. The left and the right parts are displayed just using an image (which is flipped in the X direction for the right part). The middle part however, is made up of a top (black) and a bottom (white). You can then insert/remove bullets into/from the bottom section of the middle part and the device will grow or shrink as needed.

Here's one possible implementation - you'll likely need to be more specific with your css selectors, since the sloppy ones I've used will almost certainly break something else in your page (read almost certainly as "basically guaranteed")

From the output image, you can see that I've got the devtools of the browser opened - notice how the bullets are very 'tall'? I cheated somewhat - there really should be another horizontal slice used to hold the bullets - again 3 pieces: a left, middle and right. Perhaps, with each of the pieces being stuffed into the corner or the middle section. As it stands, content placed 'below' the device will overlap the bullets, since they've been pushed down, out of their container to make the bullets sit lower on the page than the black sections. You could probably fake this with a simple div/span that holds nothing and is set to be the same height in pixels as the bullets extend past the bottom of their container. EDIT: 'fixed' (hacked) with a 20px high div that immediately follows the device. 20px = 12px for the bullet and 2x lots of 4px padding.

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>

Image (corner-left.png)

enter image description here

Output (1)

enter image description here

Output (2)

enter image description here