Javascript 如何使用CSS在三角形div上书写？

我目前正试图在我用CSS创建的三角形div上写单词

在这里：

。三角形右上角{
宽度：0；
身高：0；
边框顶部：100px纯色灰色；
左边框：100px实心透明；
}

查看

以下是

HTML

使用伪元素

演示-1

。三角形右上角{
宽度：100px；
高度：100px；
变换：旋转（45度）；
利润率：20px；
位置：相对位置；
z指数：1；
文本对齐：居中；
线高：64px；
}
.右上角三角形：之前{
内容：''；
z指数：-1；
位置：绝对位置；
排名：0；
左：0；
宽度：0；
身高：0；
变换：旋转（-45度）；
右边框：100px纯色灰色；
边框底部：100px实心透明；
}

---

查看

上面的一些答案已经达到了同样的效果。这是我的JSFIDLE，你可以玩玩

还有html

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

你好

您只能使用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;
}

.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;
}

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