2016-08-18 5 views
2

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

期待される結果:

enter image description here

+2

をはいテキストをそのままにしたい場合は、疑似要素を使用する方が良いでしょう。 – Aziz

+0

@Aziz Ok!わかりました。しかし、私は絵の上のブロックのようなブロックルックを作成することはできません。助けて! – CaT

答えて

2

あなたが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

関連する問題