html怎么设置按钮形状六边形,带圆角的CSS六角形按钮

我并不是说用CSS无法实现这一点,但用CSS做这件事将是一项繁琐的工作. SVG始终是用于创建这样复杂形状的推荐工具(即使使用SVG,这种特殊形状也难以创建).

SVG是：

>可扩展,因此它们有助于响应式设计,形状可以拉伸以匹配内容

>让我们更多地控制形状

>易于维护

>允许我们使用偶数渐变或非纯色背景作为元素,如this answer中所做的那样(用于带圆角的正六边形)

在SVG中,它只需要以圆角六边形的形式创建路径,然后将该路径图像放置在容器后面.

下面是关于path元素的d属性中使用的各种命令的一些解释(但我强烈建议你学习SVG命令 – here is a tutor from the MDN)：

> M – 将假想的笔移动到坐标指定的点.

> L – 从前一个坐标表示的点到当前坐标绘制一条直线.

> Q – 绘制从笔的当前位置到Q指令后面的第二组坐标指示的点的二次曲线.第一组坐标代表控制点.该控制点确定曲线的斜率.

> z – 通过从当前笔位置到起点绘制直线来关闭形状.

.hex {

position: relative;

height: 100px;

min-width: 100px;

padding: 12px 24px;

margin: 4px;

float: left;

font-weight: bold;

font-size: 20px;

text-align: center;

color: white;

}

.hex svg {

position: absolute;

height: 100%;

width: 100%;

top: 0px;

left: 0px;

z-index: -1;

}

path {

fill: rgb(251, 208, 0);

}

.hex.border path {

stroke: red;

stroke-width: 4;

}

span {

display: block;

margin-top: 50px;

padding: 8px;

transform: translateY(-50%);

}

Some text

Some lengthy text

without line break.

Some very lengthy text

Some very lengthy text

with line break.

对于您的情况,因为您需要将形状设置为按钮(或链接),您应该将路径元素包装在aa(SVG锚元素)中,如下面的代码段所示,并使用text元素添加文本(如span) .您还会注意到我略微修改了形状,使侧面的角度变窄.

.hex {

position: relative;

height: 100px;

min-width: 300px;

padding: 12px 24px;

margin: 4px;

float: left;

}

.hex svg {

position: absolute;

height: 100%;

width: 100%;

top: 0px;

left: 0px;

}

path {

fill: rgb(251, 208, 0);

}

text {

font-family: Arial;

font-weight: bold;

}

Get to know us

笔记：

>形状不是100％完美,但我会给你留下微调.答案是帮助您找到一个起点.>我添加了一个笔画(边框)只是为了表明它也可以完成.如果不需要,可以通过从路径元素的CSS中删除笔触和笔触宽度属性来删除它.>不要被SVG代码的冗长程度所拖延,它只是因为我不止一次地重复它 – 每个容器一次.这可以减少.