텍스트가있는 CSS 사다리꼴

이것이 CSS에서 가능할 지 모르지만 묻는 것이 좋습니다.텍스트가있는 CSS 사다리꼴

중간에 투명 (사다리 모양)을하고 싶습니다. 그 안에 서식있는 텍스트 (작은 이미지도 있습니다.)가 있어야합니다. 또한 반응이 있어야합니다. CSS이 가망이

가 : 여기가 무슨 뜻인지의 모형은? 나는 사다리꼴 모양을 만드는 방법을 알고 있지만, 그 안에 텍스트를 얻는 방법을 알아 내지 못했고, 모양이 윤곽이 잡히지 않았다. 사다리꼴 형상의 width/height을 동적으로 변경해야

출처

2014-09-23 mango

[CSS 형식] (http://css-tricks.com/examples/ShapesOfCSS/) –

감사합니다. 그러나 모양을 얻는 방법을 알고 있습니다. 빈 모양 안에 텍스트를 넣으려고합니다. – mango

여기에서보십시오 : http://stackoverflow.com/questions/16748387/how-to-bevel-the-corner-of-a-block-div/16748949#16748949 –

경우 다음과 같이 CSS transform S를 사용하는 효과를 달성 할 수 :

.box { 
 
    width: 300px;  /* optional - feel free to remove it */ 
 
    /* height: 150px; */ /* optional - feel free to remove it */ 
 
    position: relative; 
 
    padding: 5px; 
 
} 
 

 
.box:before { 
 
    content: ""; 
 
    position: absolute; 
 
    border: 3px solid teal; 
 
    
 
    top: -4%; bottom: -11%; left: -3%; right: -3%; 
 
    z-index: -1; 
 

 
    -webkit-transform: perspective(50em) rotateX(-30deg); 
 
    transform: perspective(50em) rotateX(-30deg); 
 
}

<div class="box"> 
 
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus sed unde voluptate non temporibus quae amet possimus dolorum quisquam atque nemo reprehenderit quasi suscipit vero cum delectus quibusdam optio asperiores. 
 
</div>

그러나 이러한 방법은 지원되지 IE9 이상.

출처

2014-09-23 17:37:29

나는 (틀릴 수도 있음) 그녀는 텍스트가 윤곽선 윤곽선을 따라 가고 싶어한다고 가정했다. – TylerH

@TylerH 제공된 이미지에서 언급 한 효과가 보이지 않습니다. –

이렇게 가까이 http://jsfiddle.net/eobzfuay/ 나는 똑같은 방식으로 노력하고 있었다 – DaniP

텍스트가있는 CSS 사다리꼴

답변

관련 문제