CSS - 如何制作带有尖边的矩形？ [复制]

Posted 2023-03-06

【中文标题】CSS - 如何制作带有尖边的矩形？ [复制]

【英文标题】：CSS - How to make rectangle with pointed sides? [duplicate]

【发布时间】：2014-07-02 09:41:21

【问题描述】：

http://nl.tinypic.com/r/jgm90h/8

我想知道如何使用纯 CSS3 使 html 按钮标签具有上述链接中的形状。你们能帮帮我吗？

【问题讨论】：

将::before 和::after 与基本的CSS 三角形一起使用。

【参考方案1】：

诀窍是使用伪类:before 和:after。试试这样：

.yourButton 
    position: relative;
    width:200px;
    height:40px;
    margin-left:40px;
    color:#FFFFFF;
    background-color:blue;
    text-align:center;
    line-height:40px;


.yourButton:before 
    content:"";
    position: absolute;
    right: 100%;
    top:0px;
    width:0px;
    height:0px;
    border-top:20px solid transparent;
    border-right:40px solid blue;
    border-bottom:20px solid transparent;


.yourButton:after 
    content:"";
    position: absolute;
    left: 100%;
    top:0px;
    width:0px;
    height:0px;
    border-top:20px solid transparent;
    border-left:40px solid blue;
    border-bottom:20px solid transparent;

JsFiddle：http://jsfiddle.net/VpW5x/