CSS / WBBoard 的 LESS 六边形头像

Question

ATM 我们的woltlab 烧录板用下面的LESS 代码将用户头像显示为圆图，非常漂亮。

.sidebar > div > fieldset > .userAvatarImage img {
    border-radius: 0 !important;
}

.message .messageSidebar .userAvatarImage img,
img[alt~="Benutzer-Avatarbild"],
img[alt~="User Avatar"] {
    border-radius: 200px;

}

.messageGroupList .columnAvatar .myAvatar {
    box-shadow: 0 0 0 0 rgba(0,0,0,0)
}

.framed > canvas, 
.framed > img, 
.framed > .icon {
    border: 1px solid darken(@wcfContainerBackgroundColor,8%);
    border-radius: 200px;

}

#topMenu:not(.fixed) .headerUserAvatar {
    left: 12px;
    position: absolute;
    top: -33px;
}

#topMenu:not(.fixed) .headerUserAvatar img {
    padding: 2px;
    border: 0 !important;
    height: 60px !important;
    width: 60px !important;
}

#topMenu.fixed .headerUserAvatar {
    left: 12px;
    position: absolute;
    top: 5px;
}

#topMenu.fixed .headerUserAvatar img {
    padding: 2px;
    border: 0 !important;
    height: 24px !important;
    width: 24px !important;
}

.pageHeaderUser #topMenu.fixed .userPanelItems {
    margin-left: 48px;

}

我的新想法是将用户头像显示为具有相同边长的六边形。六边形必须有一个 120° 脚踝指向顶部。我不知道如何实现它。有人知道怎么做吗？对不起，如果我描述的不是那么好 - 很难用英语解释我的写作。

Answer 1

在使用关键字 css 和 shape 进行快速研究后，我发现只有 css，到处都受支持 解决方案：

https://css-tricks.com/examples/ShapesOfCSS/

或者你可以使用 SVG :

<svg width="100%" height="300">
  <defs>
     <pattern id="image" x="0" y="0" height="300" width="300">
       <image width="300" height="300" xlink:href="http://placekitten.com/306/306"></image>
    </pattern>
  </defs>

  <polygon points="150,0 280,75 280,225 150,300 20,225 20,75" fill="url('#image')"></polygon>

</svg>

Fiddle: https://jsfiddle.net/8but9nc4/2/

或者直接使用CSS clip-path 属性（仅适用于Webkit浏览器）：

clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);

（您可能需要添加 -webkit- 前缀）。

这些在线工具可以帮助您：

Clippy 或 Clip Path Generator

CSS / WBBoard 的 LESS 六边形头像

CSS / LESS hexagon avatar for WBBoard

css

hex

less

avatar

}

}

}