Html 在CSS中为尖头按钮创建轮廓边框

是否可以在CSS中制作一个按钮，如下图所示。我试过了，我可以得到一个实体形状，但没有一个轮廓边界

JSIDLE代码：

            <div class="point-btn"></div>

            .point-btn
            {
                width: 148px;
                height: 34px;
                background: #0a187e;
                position: relative;
                -moz-border-radius:3px 0 0 3px;
                -webkit-border-radius:3px 0 0 3px;
                border-radius:3px 0 0 3px;
                margin-left:50px;
            }
            .point-btn:before
            {
                content:"";
                position: absolute;
                left: 100%;
                width: 0;
                height: 0;
                border-top: 17px solid transparent;
                border-left: 14px solid #0a187e;
                border-bottom: 17px solid transparent;
            }

.点btn
{
宽度：148px；
高度：34px；
背景：#0a187e；
位置：相对位置；
-moz边界半径：3px 0 3px；
-webkit边界半径：3px 0 3px；
边界半径：3px 0 3px；
左边距：50像素；
}
.点btn：之前
{
内容：“；
位置：绝对位置；
左：100%；
宽度：0；
身高：0；
边框顶部：17px实心透明；
左边框：14px实心#0a187e；
边框底部：17px实心透明；
}

不太漂亮-但您应该有一个不错的起点，只需在现有三角形形状上使用另一个伪元素：

.point btn{
宽度：148px；
高度：28px；
边框：2px实心#0a187e；
背景：#fff；
位置：相对位置；
-moz边界半径：3px 0 3px；
-webkit边界半径：3px 0 3px；
边界半径：3px 0 3px；
左边距：50像素；
}
.点btn：之后{
内容：“；
位置：绝对位置；
左：100%；
宽度：0；
身高：0；
顶部：0px；
边框顶部：14px实心透明；
左边框：10px实心#fff；
边框底部：14px实心透明；
}
.点btn：之前{
内容：“；
位置：绝对位置；
左：100%；
宽度：0；
顶部：-4px；
身高：0；
边框顶部：18px实心透明；
左边框：14px实心#0a187e；
边框底部：17px实心透明；
}

---

同时设置子元素和覆盖三角形

您需要通过添加

span

作为子元素来稍微调整标记

在这里，我所做的是，用不同的尺寸克隆你的三角形并覆盖在蓝色三角形上，这将给你的三角形一个边框效果，接下来，我将

绝对
span
元素再次定位到父元素
绝对
。如果需要，您还可以使用
边距
将元素设置为正确，并去掉
/绝对
位置


.point btn{
宽度：148px；
高度：34px；
背景：#0a187e；
位置：相对位置；
-moz边界半径：3px 0 3px；
-webkit边界半径：3px 0 3px；
边界半径：3px 0 3px；
左边距：50像素；
}
.点btn：之前{
内容：“；
位置：绝对位置；
左：148px；
宽度：0；
身高：0；
边框顶部：17px实心透明；
左边框：14px实心#0a187e；
边框底部：17px实心透明；
}
.点btn：之后{
内容：“；
位置：绝对位置；
左：147px；
宽度：0；
身高：0；
顶部：4px；
边框顶部：13px实心透明；
左边框：10px实心#fff；
边框底部：13px实心透明；
}
.点btn跨度{
宽度：142px；
背景：#fff；
高度：25px；
位置：绝对位置；
顶部：4px；
左：5px；
}
谢谢，伙计们，你们说得对，这并不漂亮，但两个答案都符合我的要求。