html+圆角六边形,CSS3 使用clip-path创建圆角六边形

要使用`clip-path`属性创建圆角六边形，可以使用`polygon()`函数指定六边形的顶点坐标，并在坐标中使用`border-radius`属性来定义圆角半径。以下是一个 HTML 和 CSS 示例代码：

<div class="shape"></div>

.shape {
  width: 100px;
  height: 100px;
  background-color: #ff0000;
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  -webkit-clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  border-radius: 20px;
}

在这个例子中，`polygon()`函数指定了六个点的坐标，这些点组成了一个六边形。`border-radius`属性用于给六边形添加圆角。需要注意的是，由于`clip-path`属性不被所有浏览器支持，因此为了更好的兼容性，我们需要添加`-webkit-clip-path`属性来兼容一些旧版的 Safari 浏览器。