JSFiddle - React, Tailwind, and code Playground

by Glynne Turner

HTML

<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.0.3/css/font-awesome.min.css">
<div class="triangle">
    <p>
    here this is my text
    </p>
</div>

CSS

.triangle{
    position: relative;
    float:right;
    clear:right;
    overflow:hidden;
    z-index:1;
    padding:20% 1% 0 30%; 
}
.triangle p{color:#ffffff;position:relative;  right: 0px; bottom: 50px; -ms-transform: rotate(-45deg); /* IE 9 */
  -webkit-transform: rotate(-45deg); /* Safari 3-8 */
  transform: rotate(-45deg); text-align:center}
 
.triangle:after{
    content:"";
    position:absolute;
    background-color:#7f3f98;
    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;    
}