This can be achieved with just CSS :before
selector and content property value
.
.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 withiwithin */
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%;
}
<div class="halfed"> X </div>
<div class="halfed1"> X </div>