與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>