This can be achieved with just CSS `:before` selector and `content property value`. <!-- begin snippet: js hide: false --> <!-- language: lang-css --> .halfed, .halfed1 { float: left; } .halfed, .halfed1 { font-family: arial; font-size: 300px; font-weight: bolder; width: 200px; height: 300px; position: relative; /* To help hold the content value within */ overflow: hidden; color: #000; } .halfed:before, .halfed1:before { width: 50%; /* How much we'd like to show */ overflow: hidden; /* Hide what goes beyond our dimension */ content: 'X'; /* Halfed character */ height: 100%; position: absolute; color: #28507D; } /* For Horizontal cut off */ .halfed1:before { width: 100%; height: 55%; } <!-- language: lang-html --> <div class="halfed"> X </div> <div class="halfed1"> X </div> <!-- end snippet --> [>> See on jsFiddle][1] [1]: https://jsfiddle.net/u5c03mjt/