A custom style with pure CSS and HTML

Question

I am trying to create a style using CSS and HTML. My desire style is something similar to this.

Most of things of that style have been done with pure CSS and HTML.

This is my CSS -

.filter-box {
    float: left;
    margin: 0 3% 0 2%;
    width :29%;

    > .main-cat {      
        background-color: #FFFFFF;
        display: block;
        margin-top: 25px;
        padding: 10px;
        position: relative;

        > h3 {
            margin: 0;
        }
    }

    > .main-cat:after {
        border-bottom: 15px solid rgba(0, 0, 0, 0);
        border-left: 15px solid #FFFFFF;
        border-top: 15px solid rgba(0, 0, 0, 0);
        content: "";
        height: 0;
        margin-top: -15px;
        position: absolute;
        right: -14px;
        top: 50%;
        width: 0;
    }

    > .main-cat:first-child {
        margin-top: 0;
    }

    > .sub-cat {
            background: #FF9000;
            margin-left: 25px;
            margin-top: 5px;
            padding: 8px 10px;
            text-align: right;

        > h4 {
            margin: 0;
        }
    }
}

My problem is when I am trying to display a let border with a bold circle bullet on the left side of the sub category DIV.

Can any body tell me is this possible with pure CSS and HTML without using any image?

This is my code so far: JS BIN

Any comments would be greatly welcome.

Thank You.

Answer 1

Using :after and :before pseudo element you can achieve the result.

Check the DEMO.

Here is the CSS would be required.

.sub-cat:before{
content: "";
position:absolute;
left:25px;
height: 10px;
width: 10px;
border-radius: 50%;
background:white;
margin-top: 5px;
}

.sub-cat:after{
content: "";
position:absolute;
top:55px;
left:29px;
height:21%;
border-right: 1px solid white;
}
.sub-cat h4:before{
content: "  ";
position:absolute;
left:32px;
width: 10px;
height: 10px;
transform:rotate(90deg);
-webkit-transform:rotate(90deg);
border-right: 1px solid white;}

.sub-cat h4:after{
content: "  ";
margin-left:10px;
margin-top:4px;
position:absolute;
border-bottom: 8px solid rgba(0, 0, 0, 0);
border-left: 8px solid #000000;
border-top: 8px solid rgba(0, 0, 0, 0);
}

Answer 2

You can use the :before and :after elements in the sub-category to design the circle and left border.

Use the :before to make the circle as @megha outlined, and position it with the vertical center of the sub-cat.

Put the position of the .subcat as position: relative, so that you can define the positions of the absolutely positioned :before and :after in relation to the left edge of .subcat

Then use the :after and style it as

width: 2px; height: 100%; top: 0; left: -10px

Hope this helps

---

Look at this pen. I have modified some of the styles in the answer to make it work. (SCSS syntax) http://codepen.io/anon/pen/dJepq

  .sub-cat {
    background: #FF9000;
    margin-left: 25px;
    margin-top: 5px;
    padding: 8px 10px;
    text-align: right;
    position: relative;
    &:before {
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background-color: #ff9000;
      content: "";
      position: absolute;
      top: 12px;
      left: -20px;
    }
    &:after {
      width: 2px;
      top: -5px;
      bottom: 0;
      left: -16px;
      content: "";
      position: absolute;
      background-color: #ff9000;
    }
  }  
}

Answer 3

Another possibilities would be to use background-image (gradients) and bullets of list-item , resized via font-size : DEMO

The CSS update could be :(see comment for explanation )

.filter-box {
    background:linear-gradient(to right,
  transparent 15px,
  white 15px,
  white 17px,
  transparent 17px); /* draws the vertical bar aside list-items */
}
  background:linear-gradient( /* draw orange background */
    to right,
 transparent 40px , 
    #FF9000 40px),
    linear-gradient(/* draw middle white bar */
      to bottom,
      transparent 49%,
      white 48%,
      white 52%,
      transparent 51%
      ) right no-repeat;
  background-size:
      auto auto/* no need to resize first gradient */, 
      95% 100% /*reduce width of second gradient */;
  display:list-item;/* lests get a round bullet if this is not a li */
  color:white; /* give color to bullet */
  font-size:2.2em;/* resize bullet */
  list-style-position:inside;/* keep bullet inside element */
}
.filter-box > .sub-cat > h4 {
  margin: 0;
  font-size:0.6em;/* resize to a normal font-size from  em value inherited */
  display:inline-block;/* stands aside bullet */
  text-align: right;/* align to right */
  width:85%;/* keep min/max-width under control*/
}

Notice: no pseudo elements involved, gradient can be image for better compatibilitie and dispatch within main container , sub container and title for the background-color to increase compatibiliti with old browser.

As mentionned earlier , this menu/list deserve to be build from an HTML list.

Answer 4

Demo: http://jsfiddle.net/abhitalks/4LB5t/

CSS:

.sub-cat:before {
    content: ' ';
    border-left: 1px solid white; 
    display: inline-block;
    width: 16px; height: 42px;
    position: absolute;
    left: 40px; margin: 0px; margin-top: -8px;
    z-index: 10;
}
.sub-cat:after {
    content: '';
    display: inline-block;
    width: 8px; height: 8px;
    background-color: white;
    border-radius: 50%;
    position: absolute;
    left: 36px; margin-top: -8px;
}

Update:

Demo 2: http://jsfiddle.net/abhitalks/4LB5t/1/

Just increase the height on .sub-cat:before.

Update 2:

Demo 3: http://jsfiddle.net/abhitalks/4LB5t/2/

Added your horizontal border as well. The only changes in the css are:

.sub-cat:before {
    ...
    border-bottom: 1px solid white; 
    margin-top: -26px;
    z-index: -1;
}

You have to tweak and tune the styles to achieve what you want. Hope that helps.

Answer 5

A circular bullet can be created using the html :

<div id="circle"></div>

and its corresponding css

#circle
{
width:10px;
height:10px;
border-radius:5px;
background-color:white;
}

I am unable to understand what "let border" means.Hope this helps!