在頂部和底部創建一個傾斜的按鈕

Question

我想創建一個帶有兩條傾斜線的按鈕。一個從左下角到我管理的右側中心。下一個需要從左上角到右側。

左側的高度50px和右側的高度應爲30px

.slantedButton { 
 
    position: relative; 
 
    box-sizing: border-box; 
 
    padding: 5px; 
 
    height: 30px; 
 
    background-color: #3c50a2; 
 
    line-height: 15px; 
 
    color: white; 
 
    width: 150px; 
 
    z-index: 1000; 
 
} 
 

 
.slantedButton:after { 
 
    position: absolute; 
 
    width: 100%; 
 
    height: 100%; 
 
    content: ''; 
 
    z-index: -1; 
 
    background-color: inherit; 
 
    top: 0; 
 
    bottom: 0; 
 
    right: 0; 
 
    left: 0; 
 
    transform-origin: top right; 
 
    transform: skewY(-4deg); 
 
}

<div class="slantedButton">Hello World!</div>

我試着用:before要做到這一點，但是這並沒有制定出。

建議非常感謝。

非常感謝。

Answer 1

它使用::before找到。只要改變transform-origin：

.slantedButton { 
 
    position: relative; 
 
    box-sizing: border-box; 
 
    padding: 5px; 
 
    height: 30px; 
 
    background-color: #3c50a2; 
 
    line-height: 15px; 
 
    color: white; 
 
    width: 150px; 
 
    margin: 30px; 
 
    z-index: 1; 
 
} 
 

 
.slantedButton:before, .slantedButton:after { 
 
    position: absolute; 
 
    width: 100%; 
 
    height: 100%; 
 
    content: ''; 
 
    z-index: -1; 
 
    background-color: inherit; 
 
    top: 0; 
 
    bottom: 0; 
 
    right: 0; 
 
    left: 0; 
 
} 
 

 
.slantedButton:before { 
 
    transform-origin: top right; 
 
    transform: skewY(4deg); 
 
} 
 

 
.slantedButton:after { 
 
    transform-origin: top right; 
 
    transform: skewY(-4deg); 
 
}

<div class="slantedButton">Hello World!</div>