Skip to main content

Return to Answer

added 1 character in body
Source Link
Sleek Geek
Sleek Geek
  • 4.7k
  • 3
  • 29
  • 42

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>

>> See on jsFiddle

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 withi */ 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>

>> See on jsFiddle

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 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%; }
<div class="halfed"> X </div> <div class="halfed1"> X </div>

>> See on jsFiddle

Source Link
Sleek Geek
Sleek Geek
  • 4.7k
  • 3
  • 29
  • 42

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 withi */ 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>

>> See on jsFiddle