与CSS的按钮形状

Question

我想创建一个'简单'的按钮形状与CSS pseudeo：之后/：在课前。

我读过有关，一些博客和文章，但没有形状看起来像我的。所以我尝试了一下。但是，这是我的东西，我无法弄清楚。

button{ 
 
    height: 50px; 
 
    width: 250px; 
 
    border: solid 2px #000; 
 
    border-bottom: none; 
 
    background: orange;  
 
    } 
 
    button:after{ 
 
     height: 0; 
 
     width: 125px; 
 
     content:""; 
 
     position: absolute; 
 
     border-top: transparent 30px 
 
     border-right: solid 2px #000; 
 
    } 
 
    button:before{ 
 
     height: 0; 
 
     width: 125px; 
 
     content:""; 
 
     position: absolute; 
 
     border-top: transparent 30px 
 
     border-left: solid 2px #000; 
 
    }

<button>Let's do it</button>

有人可以给我一个提示？

Answer 1

你可以使用:before和:after伪元素创建此边界，其他元素用于橙色背景。

button { 
 
    height: 50px; 
 
    width: 250px; 
 
    border: solid 2px #000; 
 
    border-bottom: none; 
 
    background: orange; 
 
    position: relative; 
 
} 
 
button:after, 
 
button:before { 
 
    border-style: solid; 
 
    border-width: 50px 110px 0 140px; 
 
    border-color: #FFA500 transparent transparent transparent; 
 
    content: ''; 
 
    position: absolute; 
 
    left: -2px; 
 
    top: 100%; 
 
} 
 
button:after { 
 
    transform: translateY(-1px); 
 
} 
 
button:before { 
 
    border-color: black transparent transparent transparent; 
 
}

<button>Let's do it</button>

Answer 2

你可以玩这个，它有一个像你的形象http://www.cssarrowplease.com/

Answer 3

不完全一样大小的边界，但你可以用下面的一个玩法：

#pentagon { 
 
    margin-top: 45px; 
 
    position: relative; 
 
    width: 250px; 
 
    border-width: 70px 0 0; 
 
    border-style: solid; 
 
    border-color: orange transparent; 
 
} 
 
#pentagon:after { 
 
    content: ""; 
 
    position: absolute; 
 
    height: 0; 
 
    width: 0; 
 
    top: -30px; 
 
    left: 0px; 
 
    border-width: 50px 125px 0 125px; 
 
    border-style: solid; 
 
    border-color: orange white; 
 
}

<div id="pentagon"></div>