There is no direct way of applying CSS to half of the character, but in this tutorial, I will show you how to achieve this.
To start, let’s create a dev with a class of half character. This will hold our character. Let’s also add an attribute called data-car with the same value as our character.
<div class="half-character" data-char="G">G</div> <div class="half-character" data-char="A">A</div> <div class="half-character" data-char="R">R</div> <div class="half-character" data-char="N">N</div> <div class="half-character" data-char="A">A</div> <div class="half-character" data-char="T">T</div> <div class="half-character" data-char="T">T</div> <div class="half-character" data-char="I">I</div>
.half-character {
position: relative;
display: inline-block;
font-size: 100px;
} This CSS will style the element with the class “half-character” to be a relatively-positioned inline-block element with a font size of 100 pixels.
position: relative;– This sets the position of the element to be relative to its normal position in the flow of the document. This means that if you use any of the positioning properties (e.g.top,left,bottom,right) to adjust the element’s position, it will be shifted from its normal position by the specified amount.display: inline-block;– This sets the display type of the element to be “inline-block”, which means that the element will be treated as an inline element (i.e. it will be placed on the same line as the text around it) but will behave like a block-level element (i.e. it will have a width and height and will respect other layout properties like margins and padding).font-size: 100px;– This sets the size of the text within the element to be 100 pixels.
.half-character::before {
content: attr(data-char);
position: absolute;
top: 0;
left: 0;
color: #ff836b;
z-index: 1;
} This is a CSS pseudo-element that styles the element with the class “half-character” by adding some content before it. Specifically, it does the following:
content: attr(data-char);– This sets the content of the pseudo-element to be the value of thedata-charattribute of the element with the class “half-character”. So, if the element has an attribute likedata-char="A", the pseudo-element will contain the character “A”.position: absolute;– This sets the position of the pseudo-element to be absolute. This means that the pseudo-element will be positioned relative to its nearest positioned ancestor (if any) or relative to the initial containing block (if it doesn’t have a positioned ancestor).top: 0;– This sets the top edge of the pseudo-element to be 0 pixels from the top edge of its containing block.left: 0;– This sets the left edge of the pseudo-element to be 0 pixels from the left edge of its containing block.color: #ff836b;– This sets the color of the text within the pseudo-element to be the hexadecimal color value#ff836b, which is a shade of pink.z-index: 1;– This sets the stacking order of the pseudo-element to be 1. Thez-indexproperty determines how elements are layered on top of each other, with higher values appearing in front of lower values.
So, overall, this CSS will add some content before the element with the class “half-character”, position it absolutely at the top left corner of its containing block, and style the text within it to be pink and appear in front of other elements.
.half-character::after {
content: attr(data-char);
position: absolute;
top: 0;
right: 0;
color: #3fcacc;
} This is a CSS pseudo-element that styles the element with the class “half-character” by adding some content after it. Specifically, it does the following:
content: attr(data-char);– This sets the content of the pseudo-element to be the value of thedata-charattribute of the element with the class “half-character”. So, if the element has an attribute likedata-char="A", the pseudo-element will contain the character “A”.position: absolute;– This sets the position of the pseudo-element to be absolute. This means that the pseudo-element will be positioned relative to its nearest positioned ancestor (if any) or relative to the initial containing block (if it doesn’t have a positioned ancestor).top: 0;– This sets the top edge of the pseudo-element to be 0 pixels from the top edge of its containing block.right: 0;– This sets the right edge of the pseudo-element to be 0 pixels from the right edge of its containing block.color: #3fcacc;– This sets the color of the text within the pseudo-element to be the hexadecimal color value#3fcacc, which is a shade of blue.
So, overall, this CSS will add some content after the element with the class “half-character”, position it absolutely at the top right corner of its containing block, and style the text within it to be blue.
The CSS Mask
clip-path: polygon(0 0, 100% 0, 100% 50%, 0 50%);
This is a CSS property called clip-path that is used to define a clipping region for an element. The value of the clip-path property is a shape function, and in this case the shape function is polygon().
The polygon() function takes a series of coordinates as arguments and creates a polygon shape based on those coordinates. The coordinates are specified as pairs of values (x and y) separated by commas. In this case, the coordinates are given as percentages, which means that they are relative to the size of the element.
Here is what each of the coordinates means:
0 0– This specifies the x and y coordinates of the first vertex of the polygon. In this case, the x coordinate is 0% and the y coordinate is 0%, so the first vertex is at the top left corner of the element.100% 0– This specifies the x and y coordinates of the second vertex of the polygon. In this case, the x coordinate is 100% and the y coordinate is 0%, so the second vertex is at the top right corner of the element.100% 50%– This specifies the x and y coordinates of the third vertex of the polygon. In this case, the x coordinate is 100% and the y coordinate is 50%, so the third vertex is at the middle of the right edge of the element.0 50%– This specifies the x and y coordinates of the fourth vertex of the polygon. In this case, the x coordinate is 0% and the y coordinate is 50%, so the fourth vertex is at the middle of the left edge of the element.
clip-path: polygon(50% 0, 100% 0, 100% 100%, 50% 100%, 50% 50%);
Here is what each of the coordinates means:
50% 0– This specifies the x and y coordinates of the first vertex of the polygon. In this case, the x coordinate is 50% and the y coordinate is 0%, so the first vertex is at the middle of the top edge of the element.100% 0– This specifies the x and y coordinates of the second vertex of the polygon. In this case, the x coordinate is 100% and the y coordinate is 0%, so the second vertex is at the top right corner of the element.100% 100%– This specifies the x and y coordinates of the third vertex of the polygon. In this case, the x coordinate is 100% and the y coordinate is 100%, so the third vertex is at the bottom right corner of the element.50% 100%– This specifies the x and y coordinates of the fourth vertex of the polygon. In this case, the x coordinate is 50% and the y coordinate is 100%, so the fourth vertex is at the middle of the bottom edge of the element.50% 50%– This specifies the x and y coordinates of the fifth vertex of the polygon. In this case, the x coordinate is 50% and the y coordinate is 50%, so the fifth vertex is at the center of the element.
.half-character {
position: relative;
display: inline-block;
font-size: 100px;
}
.half-character::before {
content: attr(data-char);
position: absolute;
top: 0;
left: 0;
color: #ff836b;
z-index: 1;
clip-path: polygon(0 0, 100% 0, 100% 50%, 0 50%);
clip-path: polygon(50% 0, 100% 0, 100% 100%, 50% 100%, 50% 50%);
clip-path: polygon(0% 50%, 50% 50%, 100% 50%, 100% 100%, 0% 100%);
}
.half-character::after {
content: attr(data-char);
position: absolute;
top: 0;
right: 0;
color: #3fcacc;
}
