html - 纯 CSS 和 HTML 的自定义样式

Question

我正在尝试使用 CSS 和 HTML 创建样式。我的愿望风格与此类似。

大多数这种风格的东西都是用纯 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;
        }
    }
}

我的问题是，当我试图在子类别 DIV 的左侧显示带有粗体圆形元素符号的 let 边框时。

谁能告诉我在不使用任何图像的情况下使用纯 CSS 和 HTML 是否可行？

到目前为止，这是我的代码:JS BIN

非常欢迎任何意见。

谢谢。

Answer 1

另一种可能性是使用背景图像(渐变)和 list-item 的元素符号，通过 font-size 调整大小: DEMO

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

注意:不涉及伪元素，渐变可以是图像，以便更好地在主容器、子容器和背景颜色的标题中调度，以增加与旧浏览器的兼容性。

如前所述，this menu/list deserve to be build from an HTML list .