如何使用CSS在三角形div上書寫？

Question

我目前正在嘗試在使用CSS創建的三角形div上寫詞。

這裏：

.triangle-topright { 
 
    width: 0; 
 
    height: 0; 
 
    border-top: 100px solid gray; 
 
    border-left: 100px solid transparent; 
 
}

<div class="triangle-topright">view</div>

正如你所看到的，看法是不對的，因爲我希望它是裏面的造型。我也希望它能夠旋轉，這對眼睛來說很好。我知道，文本旋轉是這樣的（例子）：

-moz-transform: rotate(-90deg); 

可以用CSS實現我的目標還是需要添加一些JS？

非常感謝！

Answer 1

使用僞元素

DEMO - 1

.triangle-topright { 
 
    width: 100px; 
 
    height: 100px; 
 
    transform: rotateZ(45deg); 
 
    margin: 20px; 
 
    position: relative; 
 
    z-index: 1; 
 
    text-align: center; 
 
    line-height: 64px; 
 
} 
 

 
.triangle-topright:before { 
 
    content: ''; 
 
    z-index: -1; 
 
    position: absolute; 
 
    top:0; 
 
    left: 0; 
 
    width: 0; 
 
    height: 0; 
 
    transform: rotateZ(-45deg); 
 
    border-right: 100px solid gray; 
 
    border-bottom: 100px solid transparent; 
 
}

<div class="triangle-topright">view</div>

DEMO - 2

.triangle-topright { 
 
    width: 100px; 
 
    height: 100px; 
 
    margin: 20px; 
 
    position: relative; 
 
    z-index: 1; 
 
    text-align: center 
 
} 
 

 
.triangle-topright:before { 
 
    content: ''; 
 
    z-index: -1; 
 
    position: absolute; 
 
    top:0; 
 
    left: 0; 
 
    width: 0; 
 
    height: 0; 
 
    border-top: 100px solid gray; 
 
    border-left: 100px solid transparent; 
 
}

<div class="triangle-topright">view</div>

DEMO - 3

.triangle-topright { 
 
    width: 100px; 
 
    height: 100px; 
 
    transform: rotateZ(90deg); 
 
    margin: 20px; 
 
    position: relative; 
 
    z-index: 1; 
 
    text-align: center 
 
} 
 

 
.triangle-topright:before { 
 
    content: ''; 
 
    z-index: -1; 
 
    position: absolute; 
 
    top:0; 
 
    left: 0; 
 
    width: 0; 
 
    height: 0; 
 
    border-top: 100px solid gray; 
 
    border-left: 100px solid transparent; 
 
}

<div class="triangle-topright">view</div>

DEMO - 4

.triangle-topright { 
 
    width: 100px; 
 
    height: 100px; 
 
    transform: rotateZ(90deg); 
 
    margin: 20px; 
 
    position: relative; 
 
    z-index: 1; 
 
    text-align: center 
 
} 
 

 
.triangle-topright:before { 
 
    content: ''; 
 
    z-index: -1; 
 
    position: absolute; 
 
    top:0; 
 
    left: 0; 
 
    width: 0; 
 
    height: 0; 
 
    border-top: 100px solid gray; 
 
    border-right: 100px solid transparent; 
 
}

<div class="triangle-topright">view</div>

Answer 2

這是an example of doing it with just CSS。

HTML

<section class="page_block"> 
    <div class="row"> 
     <div class="col-md-1"> 
      <div id="header"> 
       <h1 class="verticaltext"> 
        Vert Text 
       </h1> 
      </div> 
     </div> 
     <div class="col-md-11"> 
      <p>Column Somethin?</p> 
     </div> 
    </div> 
</section> 

CSS

.page_block { 
    margin:0px; 
    padding:10px; 
} 
#header { 
    position: relative; 
} 
.verticaltext { 
    transform: rotate(45deg); 
    transform-origin: right, top; 
    -ms-transform: rotate(45deg); 
    -ms-transform-origin:right, top; 
    -webkit-transform: rotate(45deg); 
    -webkit-transform-origin:right, top; 
    position: absolute; 
    color: #ed217c; 
} 

Answer 3

有些答案以上達到相同的了。這是我可以玩的JSfiddle。

http://jsfiddle.net/tmtg1oc8/

.container { 
    position: relative; 
} 

.triangle { 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 0; 
    height: 0; 
    border-top: 100px solid gray; 
    border-left: 100px solid transparent; 
    z-index: -1; 
} 

.content { 
    padding: 40px; 
} 

和HTML

<div class="container"> 
    <div class="triangle"></div> 
    <div class="content">hello</div> 
</div>