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

Question

我有这样的元素:

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

现在盒子类是从这里生成的三 Angular 形:

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

但是文本没有进入三 Angular 形内部。我想要做的是将文本放在三 Angular 形内，并将文本放在一个 Angular 上。

这是一个 jSFiddle

https://jsfiddle.net/sp2od5oL/

Answer 1

这个呢？

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