How to make the same functionality?
To make the suspension lengthen or shorten depending on the number of characters entered in the string?
And how can I change the fonts, depending on the design chosen?
Perhaps there are ready-made solutions? I would be grateful for any information.

enter image description here

  • one
    If you are given an exhaustive answer, mark it as correct (tick the selected answer). - Mihanik71

1 answer 1

The first decision comes to mind is:

  1. We have 3 blocks absolutely positioned. Block with text and 2 block chains.
  2. The first block is aligned in the center of the block when the text is changed by calculating the width of the block with the text and the parent block.
  3. In manual we set the upper points of the chain.
  4. We define the top points of the text.
  5. We make a block with the beginning at the top point of the chain and a long one equal to the distance between the top points of the chain and the top points of the text. And turn the css block with the rotate property by an angle, which is also calculated by 2 points (upper points of the chain and upper points of the text).
  6. On the background of the created blocks put a repeating image of the chain.

Requires rotate support.

If you have questions ready to write more.

enter image description here

  1. The text block should have width: auto; position: absolute; top: 200px (for example). Through JS we determine the width of the block and the width of the working area. Then the left of the block with the text will be (ширина области - ширина блок)/2 . Thus, we find the coordinates of point B (top: 200; left: just found out).
  2. The coordinates of point A should be strictly specified in JS.
  3. How to get the coordinates of points B and D described in paragraph 2
  4. We get the coordinates of point A1 from the coordinates of points A and B - I think the figure will be clear. We got a triangle by it, we can find out the length of the side AB - this will be the width of our new block. The beginning of the block will be at point A. Well, along triangle AA1B we will be able to find the angle to which we need to turn.

The second side of the chain is doing about the same

  • Cool! 1. <div id = "main" style = "position: relative;"> <div calss = "text" style = "position: absolute;"> </ div> <div calss = "podves1" style = "position: absolute; "> </ div> <div calss =" podves2 "style =" position: absolute; "> </ div> </ div> 2. How to calculate the width of the block with the text and the parent block when changing the text? 3. This is most likely top, left you need to specify? 4. Here also top, left? 5. This is not quite understood. 6. With the background coolly invented) - bakusite
  • Now I ’ll attach an image to the answer - Mihanik71
  • one
    @bakusite added image with description - Mihanik71
  • @bakusite everything is clear? - Mihanik71