CSS에서 사다리꼴 내부에 텍스트를 삽입하는 방법은 무엇입니까?

CSS에서 사다리꼴 내부에 텍스트를 삽입하는 방법을 알려주시겠습니까? 여기 CSS에서 사다리꼴 내부에 텍스트를 삽입하는 방법은 무엇입니까?

내 코드

,691 사실 내가 ..

#container { 
    width:200px; 
    } 
    #triangle-topleft { 
     width: 200px; 
     height: 0; 
     border-top: 100px solid #ccc; 
     border-right: 200px solid transparent; 
    }

내가 404 텍스트가 사다리꼴 내부에 표시해야 원하는

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width"> 
    <title>JS Bin</title> 
</head> 
<body> 
<div id="container"> 
     <div id="triangle-topleft"> 
404 
     </div> 

    </div> 
</body> 
</html>

CSS를 같이 할 것입니다

https://jsbin.com/gucuviqigi/edit?html,css,output

출처

2017-05-14 user944513

여기 내 대답.

당신은 최고 = %로 재생할 수 있습니다

하고

이 허용으로 표시하는 것을 잊지 마세요

: 원하는대로 이동하기 %를 왼쪽 :

#container { 
 
    width:200px; 
 
    } 
 
    #triangle-topleft { 
 
     width: 200px; 
 
     height: 0; 
 
     border-top: 100px solid #ccc; 
 
     border-right: 200px solid transparent; 
 
    } 
 
    
 
    .number { 
 
    position: absolute; 
 
    top: 20%; 
 
    left: 20%; 
 
    }

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <meta charset="utf-8"> 
 
    <meta name="viewport" content="width=device-width"> 
 
    <title>JS Bin</title> 
 
</head> 
 
<body> 
 
<div id="container"> 
 
     <div id="triangle-topleft"> 
 
<div class="number"> 
 
404 
 
</div> 
 
</div> 
 
     </div> 
 

 
    </div> 
 
</body>

출처

2017-05-14 00:21:13

이가 안되는 .. .. ( – user944513

왜 안되니?) 작동하는 것 같다. –

..https : //jsbin.com/gucuviqigi/edit? html, css, 출력 – user944513

CSS에서 사다리꼴 내부에 텍스트를 삽입하는 방법은 무엇입니까?

답변

관련 문제