내 CSS 모양 안에 텍스트를 넣으려면 어떻게해야합니까?

:before을 사용하여 텍스트를 제 모양으로 변환하는 방법을 배우려하지만, 실제로 작동하지 않는지 확실하지 않습니다.내 CSS 모양 안에 텍스트를 넣으려면 어떻게해야합니까?

<div class="trapezoid"> Hello </div>

와

div { 
    border-top: 100px solid blue; 
    border-left: 50px solid transparent; 
    border-right: 50px solid transparent; 
    height: 0; 
    width: 100px; 
    position: relative; 
} 

div:before { 
    position: absolute; 
    top:0; 
    height:0; 
    width: 100%; 
}

그러나, 텍스트 모양 아래에 나타납니다 :

다음은 기본 설정입니다. 여기 내 바이올린입니다 : http://jsfiddle.net/om2wf48t/

출처

2016-09-14 user1354934

당신이 가지고있는 CSS 코드는 border-top을 사용하여 도형의 기본 본문을 만들고 border-top을 사용하여 내부에 넣은 내용을 하단으로 밀어내어 귀하의 접근법을 재고하고 해당 답변의 메소드를 사용하기 때문입니다 이 질문 대신 : https://stackoverflow.com/questions/8718587/is-it-possible-to-style-a-div-to-be-trapezoidal –

그 링크를 발견하기 전에 나는 당신의 바이올린으로 놀고있었습니다. 내가 한 일은 다음과 같습니다. https://jsfiddle.net/om2wf48t/2/ –

...'before : – AA2992

예제 코드 : http://codepen.io/skylarjhdownes/pen/mAPwKW

따라서는, 기본적으로 여기에서 일어나고있는 것은 당신이 "안녕하세요"거기에 단어를 가지고 사업부를 만들고 다음 CSS 규칙의 몇 가지를 적용하고 있다는 점이다 페이지의 모든 div에게

"border-top에서 border-bottom으로 변경하십시오."라는 텍스트에 매우 간단한 대답이 있지만 사다리꼴이 반전되어 배우려고하는 트릭을 실제로 사용하지는 않습니다.

트릭을 사용하지 못하게하는 주요한 점은 Ankith가 지적했듯이 div:before 블록에 content 속성이 누락되었습니다. 을 before:으로 확인하십시오. 모두 1이 있습니다. <div> 태그에서 "Hello"텍스트를 제거하고 div:before에 content:"Hello.";을 넣으면 중간에 있지만 텍스트는 이동하지 않습니다. 다음으로 텍스트가 움직 이도록 0이 아닌 값을 갖도록 top 속성을 변경해야합니다. top:-20px 또는 그보다 나은 경우 top:-2em은 사다리꼴 내부에 텍스트를 넣습니다.

보너스 : 원래 코드에는 실제로 아무 것도하지 않는 몇 가지 사항이 있습니다. 예를 들어 div : before 블록의 모든 내용을 삭제하면 페이지가 변경되지 않습니다. 어느 쪽도 삭제하지 않을 것입니다 class="trapezoid".

귀하의 class="trapezoid" 코드는 좋은 생각입니다. CSS에서 div을 div.trapezoid으로 변경하면 class="trapezoid"이 적합하며 페이지에서 사다리꼴이있는 div를 제어 할 수 있습니다.

출처

2016-09-14 23:03:09 Skylar

내 CSS 모양 안에 텍스트를 넣으려면 어떻게해야합니까?

답변

관련 문제