制作一个带有css的十六进制列表元素

Question

我有一个简单的小提琴：

https://jsfiddle.net/1m1rL8ts/

.hex {
  width: 10px;
  height: 10px;
  text-indent: -999px;
  background-color: #000\9;
  background-color: rgba(0, 0, 0, 0);
  border: 1px solid #fff;
}

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

我需要它填充和空，尝试一些形状，它可以通过一些技巧完成填充，但空的更难（这是旋转木马画廊）。

它也需要非常小，这是一个例子：

Answer 1

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

.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);
    }
}

https://jsfiddle.net/1m1rL8ts/2/

甚至还有使用此方法的hexagon generator

另一种只有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: '';
}

https://jsfiddle.net/087phqLd/

那个

source

或者你可以通过设置多个叠加背景＆＃34;渐变＆＃34;来使用仅1个元素（并且不使用伪装）。

Answer 2

我会使用clip-path CSS属性。你可以在这里看到它的支持：https://caniuse.com/#search=clip-path

示例：

.hex {
  margin: auto;
  width: 100px;
  height: 100px;
  background: red;
  -webkit-clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
}

<div class="hex"></div>