ボーダー付き台形を作る方法

Question

私は、テキストコンテンツとボーダー（白い1px線）を持つ台形を作成しようとしました。

が、私はこのようなもので例を見つけました：

height: 0; 
width: 120px; 
border-bottom: 120px solid #ec3504; 
border-left: 60px solid transparent; 
border-right: 60px solid transparent; 

私はそれが動作しますが、ハックの種類及びとして素敵ではないでしょうtranspartent色の背景としてこれを使用する場合、これは、PNG例..です。

「クリップ・パス」に十分対応していないことのようですので、他の方法がありますか？ SVGは可能性がありますか？あなたはpseudo-elementを使用し、背景としてその形状を作成するために、親にperspectiveを使用することができアドバンス

Answer 1

に

感謝。

body { 
 
    background: lightblue; 
 
} 
 
div { 
 
    width: 150px; 
 
    height: 40px; 
 
    padding: 20px; 
 
    display: flex; 
 
    align-items: center; 
 
    justify-content: center; 
 
    position: relative; 
 
    -webkit-perspective: 130px; 
 
    perspective: 130px; 
 
    margin: 50px; 
 
} 
 
div:after { 
 
    position: absolute; 
 
    width: 100%; 
 
    height: 100%; 
 
    background: lightgreen; 
 
    border: 1px solid white; 
 
    content: ''; 
 
    left: 0; 
 
    top: 0; 
 
    z-index: -1; 
 
    -webkit-transform: rotateX(20deg) rotateY(0deg); 
 
    transform: rotateX(20deg) rotateY(0deg); 
 
}

<div>Some text</div>