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}