Html 仅使用一个元件的细长六边形按钮

我想做一个像这样的按钮，只使用CSS而不使用其他元素

按钮图像

由于按钮附带了一个

边框

，我想我通常需要这两个元素，即

：before

和

：after

元素，以便在一侧创建一个箭头。因此，要在每一侧制作一个箭头，我需要链接中的另一个

span

元素

我试过的第二种方法是你在下面看到的方法。但在这种解决方案中，它们没有正确居中，箭头的每一侧长度不同

有人有办法吗

/*常规按钮样式*/
.按钮{
显示：块；
位置：相对位置；
背景：#fff；
宽度：300px；
高度：80px；
线高：80px；
文本对齐：居中；
字体大小：20px；
文字装饰：无；
文本转换：大写；
颜色：#e04e5e；
利润率：40px自动；
字体系列：Helvetica、Arial、无衬线字体；
框大小：边框框；
}
/*按钮边框样式*/
.按钮.边框{
边框：4px实心#e04e5e；
}
.按钮.边框：悬停{
背景：#e04e5e；
颜色：#fff；
}
/*按钮功能区边框样式*/
.按钮。功能区开始。边框：之后，
.按钮.功能区开始.边框：之前{
最高：50%；
内容：“；
高度：43px；
宽度：43px；
位置：绝对位置；
指针事件：无；
背景：#fff；
}
.按钮.功能区开始.边框：后{
左：-3px；
利润上限：-40px；
变换原点：0；
框大小：边框框；
边框底部：4px实心#e04e5e；
左边框：4px实心#e04e5e；
变换：旋转（57.5度）倾斜（30度）；
}
.按钮.功能区开始.边框：之前{
右：-46px；
利润上限：-40px；
变换原点：0；
框大小：边框框；
边框顶部：4px实心#e04e5e；
右边框：4px实心#e04e5e；
变换：旋转（57.5度）倾斜（30度）；
}
.按钮.功能区开始.边框：悬停：之后{
背景：#e04e5e
}
.按钮.功能区开始.边框：悬停：之前{
背景：#e04e5e
}

我用叉子叉了你的钢笔

基本的变化是我从主按钮中删除了侧边框（因为它们是超级棒的）

/* Button Border Style */
.button.border {
    border-top: 4px solid #e04e5e;
   border-bottom: 4px solid #e04e5e;
}

并更改了几个值以将其全部调整到位

/* Button Ribbon-Outset Border Style */
.button.ribbon-outset.border:after,
.button.ribbon-outset.border:before {
        top: 50%;
        content: " ";
        height: 43px;
        width: 43px;
        position: absolute;
        pointer-events: none;
}

.button.ribbon-outset.border:after {
        left:0;
        margin-top:-40px;
        transform-origin:0 0;
        box-sizing:border-box;
        border-bottom:4px solid #e04e5e;
        border-left:4px solid #e04e5e;
        transform:rotate(57.5deg) skew(30deg);
    }
    .button.ribbon-outset.border:before {
        right:-43px;
        margin-top:-40px;
        transform-origin:0 0;
        box-sizing:border-box;
        border-top:4px solid #e04e5e;
        border-right:4px solid #e04e5e;
        transform:rotate(57.5deg) skew(30deg);
    }

---

我自己得到了答案。这是：before和：after元素的转换属性的问题

CSS已更改：

/* Button Border Style */
.button.border {
    border-top:4px solid #e04e5e;
    border-bottom:4px solid #e04e5e;
}
/* Button Ribbon-Outset Border Style */
.button.ribbon-outset.border:after, .button.ribbon-outset.border:before {
    height: 42px;
    width: 42px;
}
.button.ribbon-outset.border:after {
    left:0;
    border-bottom:5px solid #e04e5e;
    border-left:5px solid #e04e5e;
    transform:rotate(45deg) skew(19deg,19deg);
}
.button.ribbon-outset.border:before {
    right:-42px;
    border-top:5px solid #e04e5e;
    border-right:5px solid #e04e5e;
    transform:rotate(45deg) skew(19deg,19deg);
}

---

这里有另一种方法，只需一个元素即可完成此操作

此方法的工作原理如下：

两个伪元素<代码>：在<代码>之前和<代码>：在<代码>之后，大约是主<代码>按钮<代码>元素大小的一半（包括<代码>边框<代码>）。每个伪元素的高度在一侧（顶部/底部）为34px+4px边框，在另一侧为2px边框

形状的上半部分使用

：before

元素实现，而下半部分使用

：after

元素实现

使用

rotateX

和

perspective

实现倾斜效果，并定位以放置两个元素，使其形成预期的形状

/*常规按钮样式*/
.按钮{
位置：相对位置；
显示：块；
背景：透明；
宽度：300px；
高度：80px；
线高：80px；
文本对齐：居中；
字体大小：20px；
文字装饰：无；
文本转换：大写；
颜色：#e04e5e；
利润率：40px自动；
字体系列：Helvetica、Arial、无衬线字体；
框大小：边框框；
}
.按钮：之前，
.按钮：之后{
位置：绝对位置；
内容：''；
宽度：300px；
左：0px；
高度：34px；
z指数：-1；
}
.按钮：之前{
变换：透视（15px）旋转（3deg）；
}
.按钮：之后{
顶部：40px；
变换：透视（15px）旋转（-3deg）；
}
/*按钮边框样式*/
.按钮.边框：在，
.按钮.边框：后{
边框：4px实心#e04e5e；
}
.按钮.边框：在{
边界底部：没有；/*防止边界线出现在形状的中间*
}
.按钮.边框：后{
边界顶部：没有；/*以防止边界线出现在形状的中间*
}
/*按钮悬停样式*/
.按钮.边框：悬停：在，
.按钮.边框：悬停：之后{
背景：#e04e5e；
}
.按钮.边框：悬停{
颜色：#fff；
}

---

这只是哈利回答的一个更简单的选择

此方法使用

scale（）

和

rotate（45度）

变换。使用此方法，您可以非常轻松地更改左右V形的角度

div{
高度：70像素；
宽度：200px；
左边距：40px；
边框顶部：4px实心#E04E5E；
边框底部：4px实心#E04E5E；
位置：相对位置；
文本对齐：居中；
颜色：#E04E5E；
线高：70px；
字号：21px；
字体系列：无衬线；
}
div:before，div:after{
内容：''；
位置：绝对位置；
顶部：13px；
高度：40px；
宽度：40px；
边框：4px实心#E04E5E；
-webkit变换：缩放（0.8,1.25）旋转（45度）；
-莫兹变换：缩放（0.8,1.25）旋转（45度）；
-ms变换：缩放（0.8,1.25）旋转（45度）；
变换：缩放（0.8,1.25）旋转（45度）；
}
部门：以前{
左：-22px；
边框顶部：0px实心透明；
右边框：0px实心透明；
}
部门：之后{
右：-22px；
边框底部：0px实心透明；
左边框：0px实心透明；
}
div:hover，div:hover:before，div:hover:after{
背景色：#E04E5E；
颜色：#EEE；
}

---

您好！

也许您可以使用SVG背景图像并将其添加到数据url中。@Harry我认为您的评论仍然很有用，如果它不是我所需要的，因为它带有进一步的标记。仍然很有趣，谢谢。非常感谢，它看起来很清晰。但仍然存在一个问题，即箭头的角是not居中或正确对齐：如果没有进一步的标记，这可能是不可能的？这是一个问题，因为转换和倾斜我怀疑…那