有没有办法为带有边框的按钮创建css尖角？

有没有办法在css中创建这样的按钮？有“博客”文本的人。我尝试在每个角落添加一个div，给这些div边框并旋转它们，但正如您所看到的（Anout Me btn），它不是最好的解决方案，因为角落不准确。有没有办法为带有边框的按钮创建css尖角？

谢谢您的想法！

来源

2017-06-02 vit libovicky

是否必须是一个'

[Flat sharp corner or beveled corner]的可能重复（https://stackoverflow.com/questions/10883963/flat-sharp-corner-or-beveled-corners） – noahnu

没有CSS规则去做，但它是可能的。您需要一个inline-block或block元素用于您的按钮，并在左侧和右侧有一个边框。然后，您需要在容器的顶部和底部放置两个伪元素::before和::after（使用absolute定位）。只需添加透视图并相应地旋转元素的X值，即可轻松完成。它可能不是每个设备上的“像素完美”，但它在最近的设备和浏览器上会看起来接近完美。

你可以看看我前一阵做这些六角形按钮来获得一个更好的主意：https://codepen.io/chriskirknielsen/pen/MpXKVV

来源

2017-06-02 22:05:57 chriskirknielsen

这些是一些甜美的按钮！ –

非常感谢这个解决方案，我设法使它看起来完全像我需要的！ –

很高兴能帮到你！ @PatrickRoberts谢谢！ – chriskirknielsen

不容易与CSS没有。你可以尝试使用CSS形状来获得粗略的相似性 - 但是作为形状，你无法准确得出它，如果这是你的意图，你可能无法对它做出正确的描边。

#octagon { 
    width: 100px; 
    height: 100px; 
    background: red; 
    position: relative; 
} 

#octagon:before { 
    content: ""; 
    position: absolute; 
    top: 0; 
    left: 0; 
    border-bottom: 29px solid red; 
    border-left: 29px solid #eee; 
    border-right: 29px solid #eee; 
    width: 42px; 
    height: 0; 
} 

#octagon:after { 
    content: ""; 
    position: absolute; 
    bottom: 0; 
    left: 0; 
    border-top: 29px solid red; 
    border-left: 29px solid #eee; 
    border-right: 29px solid #eee; 
    width: 42px; 
    height: 0; 
}

来源

2017-06-02 22:03:28 Korgrue

您可以使用堆栈片段进行工作演示吗？我很好奇看到这在行动。 –

有没有办法为带有边框的按钮创建css尖角？

回答

相关问题