You can use pseudo elements and transform:rotate()
to make a triangle that adapts to the size of its content.
This technique might need a bit of tweaking according to the context you use it in (container with to traingle width ratio) and the design you want when text becomes larger.
HTML:
<div class="wrapper">
<a class="icon-play fa fa-play-circle-o" rel="lightbox" href="#">
<p> See it in action</p>
</a>
</div>
CSS:
.wrapper{
position: relative;
float:right;
clear:right;
overflow:hidden;
z-index:1;
padding:0 1% 0 30%;
margin-right:5%;
}
.fa-play-circle-o{
display:block;
margin:130% 0 2%;
color:#fff;
text-decoration:none;
font-size:18px;
text-align:center;
}
.fa-play-circle-o:before{
font-size:30px;
}
.wrapper:after{
content:"";
position:absolute;
background-color:#666666;
width:500%;
height:100%;
top:0;right:0;
z-index:-1;
-ms-transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
-ms-transform-origin:100% 0;
-webkit-transform-origin:100% 0;
transform-origin:100% 0;
}