html - CSS在三 Angular 形的元素内添加文本

我有这样的元素：

 <div class="box">Beautiful Wooded Lots</div>

现在box类是从此处生成的三角形：

http://apps.eky.hk/css-triangle-generator/

我从那里得到的：

.box {
width: 0;
height: 0;
border-style: solid;
border-width: 300px 300px 0 0;
border-color: #25779B transparent transparent transparent;
position: absolute;
color: #FFF;
font-size: 30px;
text-transform: uppercase;
}

但是文本不在三角形内。我想做的是将文本放入三角形内，并将文本倾斜。

这是一个jSFiddle

https://jsfiddle.net/sp2od5oL/

最佳答案

那这个呢？

.box{
border-bottom: 300px solid #25779B;
border-left: 300px solid transparent;
border-right: 300px solid transparent;
float:left;
margin-left:-200px;
position:relative;
top:-50px;
-webkit-transform: rotate(-45deg);}

.box > span{
color:#fff;
font-size:1em;
font-weight:bold;
position:absolute;
right:-26px;
top:40px;}

<div class="box"><span>Beautiful Wooded Lots</span></div>

关于html - CSS在三 Angular 形的元素内添加文本，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/41707344/