Я пытаюсь создать стиль с помощью CSS и HTML. Мой стиль желания похож на этот.

enter image description here

Большинство вещей этого стиля было сделано с помощью чистого CSS и HTML.

Это мой 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;
        }
    }
}

Моя проблема заключается в том, что я пытаюсь отобразить границу let с жирным кружком в левой части подкатегории DIV.

Может ли кто-нибудь сказать мне, возможно ли это с чистым CSS и HTML без использования изображения?

На данный момент это мой код: JS BIN

Будем очень рады любым комментариям.

Спасибо.

1
TNK 21 Май 2014 в 08:47

5 ответов

Лучший ответ

Демо: 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;
}

Обновление :

Демонстрация 2: http://jsfiddle.net/abhitalks/4LB5t/1/

Просто увеличьте высоту на .sub-cat:before.

Обновление 2 :

Демонстрация 3: http://jsfiddle.net/abhitalks/4LB5t/2/

Также добавлена ​​ваша горизонтальная граница. Единственные изменения в css:

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

Вам нужно настроить стили, чтобы добиться того, чего вы хотите. Надеюсь, это поможет.

2
Abhitalks 21 Май 2014 в 06:16

Еще одна возможность - использовать фоновое изображение (градиенты) и маркеры элемента списка, размер которых изменяется с помощью font-size: ДЕМО

Обновление CSS может быть таким: (объяснение см. В комментарии)

.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*/
}

Примечание: никаких псевдоэлементов, градиент может быть изображением для лучшей совместимости и отправки в основном контейнере, вложенном контейнере и заголовке для цвета фона, чтобы улучшить совместимость со старым браузером.

Как упоминалось ранее, это меню / список заслуживает создания из списка HTML.

3
G-Cyrillus 21 Май 2014 в 07:33

Вы можете использовать элементы :before и :after в подкатегории для создания круга и левой границы.

Используйте: before, чтобы сделать круг как обведенный @megha, и расположите его по вертикальному центру подкатегории.

Поместите положение .subcat как position: relative, чтобы вы могли определить положения абсолютно позиционированных :before и :after по отношению к левому краю .subcat

Затем используйте: after и стилизуйте его как

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

Надеюсь это поможет


Посмотри на эту ручку. Я изменил некоторые стили в ответе, чтобы он работал. (Синтаксис SCSS) 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;
    }
  }  
}
1
kumarharsh 21 Май 2014 в 08:35

Используя псевдоэлементы :after и :before, можно добиться результата.

Проверьте ДЕМО .

Вот код CSS, который потребуется.

.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);
}
1
Kheema Pandey 21 Май 2014 в 08:41

Круговую пулю можно создать с помощью html:

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

И соответствующий ему css

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

Я не могу понять, что означает «пусть граница». Надеюсь, это поможет!

0
megha 21 Май 2014 в 04:57