Html 用css制作一个十六进制的列表元素

我有一把简单的小提琴：

还有一个矩形列表元素。我需要把它做成六边形。最简单的方法是什么？（我知道即使是简单的方法也会相当复杂）

我需要它填补和空白，尝试了一些形状，它可以做一些技巧，当它填补，但空的一个更难（它的旋转木马画廊）

它还需要非常小，例如：

---

我会使用

剪辑路径

CSS属性。您可以在此处看到它的支持：

例如：

.hex{
保证金：自动；
宽度：100px；
高度：100px；
背景：红色；
-webkit剪辑路径：多边形（50%0%、100%25%、100%75%、50%100%、0%75%、0%25%）；
剪辑路径：多边形（50%0%、100%25%、100%75%、50%100%、0%75%、0%25%）；
}

---

我会使用

剪辑路径

CSS属性。您可以在此处看到它的支持：

例如：

.hex{
保证金：自动；
宽度：100px；
高度：100px；
背景：红色；
-webkit剪辑路径：多边形（50%0%、100%25%、100%75%、50%100%、0%75%、0%25%）；
剪辑路径：多边形（50%0%、100%25%、100%75%、50%100%、0%75%、0%25%）；
}

---

有几种技术，我最喜欢的是使用堆叠的伪元素

.hex {
  background:chartreuse;
    position: relative;
    width: 4em;
    height: 6.2em;
    border-radius: 10px;
    display: inline-block;
    top: 0;
    &:before,
    &:after {
        position: absolute;
        width: inherit;
        height: inherit;
        border-radius: inherit;
        background: inherit;
        content: "";
    }
    &:before {
        transform: rotate(60deg);
    }
    &:after {
        transform: rotate(-60deg);
    }
}

甚至有一家公司使用这种方法

另一种只有1个伪元素的技术

.hexagon {
    position: relative;
    overflow: hidden;
    background: transparent;
    width: 10em;
    height: 10em;
    transform: rotate(-30deg) skewX(30deg) scaleY(.866);
}

.hexagon:before {
    position: absolute;
    right: 6.7%;
    bottom: 0;
    left: 6.7%;
    top: 0;
    transform: scaleY(1.155) skewX(-30deg) rotate(30deg);
    background: chartreuse;
    content: '';
}

为了那个

---

或者，通过设置多个堆叠背景“渐变”，您可能不需要使用一个元素（而不使用伪元素）。

有几种技术，我最喜欢的是使用堆叠伪元素

.hex {
  background:chartreuse;
    position: relative;
    width: 4em;
    height: 6.2em;
    border-radius: 10px;
    display: inline-block;
    top: 0;
    &:before,
    &:after {
        position: absolute;
        width: inherit;
        height: inherit;
        border-radius: inherit;
        background: inherit;
        content: "";
    }
    &:before {
        transform: rotate(60deg);
    }
    &:after {
        transform: rotate(-60deg);
    }
}

甚至有一家公司使用这种方法

另一种只有1个伪元素的技术

.hexagon {
    position: relative;
    overflow: hidden;
    background: transparent;
    width: 10em;
    height: 10em;
    transform: rotate(-30deg) skewX(30deg) scaleY(.866);
}

.hexagon:before {
    position: absolute;
    right: 6.7%;
    bottom: 0;
    left: 6.7%;
    top: 0;
    transform: scaleY(1.155) skewX(-30deg) rotate(30deg);
    background: chartreuse;
    content: '';
}

为了那个

---

或者，您可以通过设置多个堆叠背景“渐变”而不使用一个元素（并且不使用伪元素）。

虽然我喜欢剪辑路径，但它在IE、边缘和Safari@FacundoCorradini我能理解。这只是可能的选择之一。我不明白的是，为什么我会被否决？我特别增加了当前的支持率。好吧，我支持你。下层选民和重复问题警察真让我沮丧：（有时对“重复问题”给出正确答案）因此，基本上善待初学者会让你受到惩罚：@虽然我喜欢剪辑路径，但它在IE、Edge和Safari@FacundoCorradini我能理解。这只是一个可能的选择。我不明白的是为什么我会被否决。我特别增加了当前的支持率。好吧，我支持你。否决选民重复问题警察真的让我很沮丧：（有时，对“重复问题”给出正确答案会招致大量的反对票。因此，基本上善待初学者会让你受到惩罚：@