CSSでブロックを変換するには？

Question

CSSのブロックを変換する方法は？擬似要素は必要かどうか？私は下の図のブロックのようなブロックルックを作成しようとします。私は下の写真のようなブロックを作ることができません。

は、これは私のコードです：

.transform_items { 
 
    width: 40%; 
 
    height: 80px; 
 
    position: relative; 
 
    margin: 0 auto; 
 
    perspective: 600px; 
 
    margin-top: 150px; 
 
    left: 50px; 
 
} 
 
.block, 
 
.block::before{ 
 
    display: block; 
 
    position: absolute; 
 
    margin: 0 auto; 
 
} 
 
.block { 
 
    border: 5px solid transparent; 
 
    width: 350px; 
 
    height: 60px; 
 
} 
 
.block::before { 
 
    content: ''; 
 
    border: 5px solid #52B352; 
 
    transform: rotateY(30deg); 
 
    top: -5px; 
 
    right: -5px; 
 
    bottom: -5px; 
 
    left: -35px; 
 
} 
 
.block a { 
 
    font-size: 24px; 
 
}

<div class="transform_items"> 
 
    <div class="block"><a>Block</a></div> 
 
</div>

期待される結果：

Answer 1

あなたがSVGを使用することができる場合^（1）、それはあなたがまた、テキスト要素せず、.svgファイルとしてをSVGコードを保存することができ、この

codePen

svg #block { 
 
    stroke: orange; 
 
    fill: none; 
 
    stroke-width: 5 
 
} 
 
svg text { 
 
    font-size: 25px 
 
}

<svg version="1.1" x="0px" y="0px" width="274px" height="84px" viewBox="0 0 274 84"> 
 
    <polygon id="block" points="33,13 245,24 245,60 29,64 " /> 
 
    <text x="100" y="50">BLOCK</text> 
 
</svg>

ようなもの、と可能性あなたのテキストを含むdivのbackground-imageとしてそれを使用してください。

異なる方法でSVGを使用する方法を学ぶために、これを読んで：https://css-tricks.com/using-svg/

---

^{（1）SVG用}_{ブラウザのサポートがtransform用ブラウザのサポートよりも少し優れている、caniuse: SVG}