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/