How to use the shape-outside attribute of CSS to achieve the display effect of gradually shortening text?

CSS shape-outside property realizes text fading effect

This article introduces a unique web page text display technique: gradually shorten the text length and create dynamic visual effects, which is very suitable for creative web pages or art displays.

This can be achieved through shape-outside property of CSS. shape-outside allows you to define a non-rectangular shape that text will surround, resulting in a visual effect of text fading.

The following example demonstrates how to achieve this using shape-outside :

 .container {
  width: 300px;
  height: 300px;
  position: relative;
}

.shape {
  width: 100%;
  height: 100%;
  background-color: #f0f0f0;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); /* Adjustable shape*/
  shape-outside: polygon(0 0, 100% 0, 100% 100%, 0 100%); /* Consistent with clip-path*/
  float: left;
}

.text {
  margin-left: 30px;
  font-size: 18px;
}

<div class="container">
  <div class="shape"></div>
  <div class="text">
    This is a sample text that gradually gets shorter in length. This is a sample text that gradually gets shorter in length.
  </div>
</div>

In the code, clip-path and shape-outside attributes jointly define a polygon shape. By modifying the vertex coordinates of the polygon, you can adjust the shape of the text wrapping to control the effect of text fading. It should be noted that the value of shape-outside should be consistent with clip-path to ensure the accuracy of the effect.

To explore this effect more deeply, you can try modifying the coordinate values ​​of polygon to create different shapes to achieve various text fading effects. For example, you can try using more complex shapes, such as circles or curves, for a richer visual effect. Remember, the key is to adjust polygon value to control the shape, thereby controlling how the text is displayed.

The above is the detailed content of How to use the shape-outside attribute of CSS to achieve the display effect of gradually shortening text?. For more information, please follow other related articles on the PHP Chinese website!