Geometric shapes on post

  • Unknown's avatar
    heyleeeo · Member ·

    Hello, good night…

    I would like to know if it would be possible to add a way to insert geometrical figures, such as circles and squares, when creating posts. It’s been a while since I’ve been using buttons to create rectangles with text inside, however, there are times when that is not enough. It would be amazing if there was a block that made it possible to add rectangle and circle with text inside it.

    Thank you!

    The blog I need help with is: (visible only to logged in users)

  • Unknown's avatar
    musicdoc1 · Member ·

    Hi,

    I’m not aware of any block that can be used to create various geometric shapes, but I’ll call for staff attention in case I’ve missed something.

    Alternatively, see the topic Text box in post. The thread is very old (2009), but the codes provided by @panaghiotisadam still work. If you omit text when creating a text box, then you’re left with an empty box. You might find newer relevant and helpful topics, in the forums “text box” tag archives, here: https://en.forums.wordpress.com/topic-tag/text-box/.

    Text boxes with rounded corners and other shapes, including circles, would I think require Custom CSS. The topic
    Text box with rounded corners (in html) might be helpful.

  • kokkieh · Staff ·

    Hi there,

    There’s no block currently that does this. At least, no block included in the Core WordPress software or developed by us on WordPress.com. There might be plugins for this, but those would require our Business Plan to use here.

    But if you’re comfortable with HTML and CSS you should be able to do this using a HTML block. You can see the basic idea here:

    https://www.w3schools.com/howto/howto_css_shapes.asp

    You won’t be able to do exactly that on WordPress.com, but instead, add a div tag in the HTML block, and then add the CSS as an inline style using a style attribute. For example:

    <div style="width: 0; height: 0; border-left: 25px solid transparent; border-right: 25px solid transparent; border-top: 50px solid #555;"></div>

    That would give you this (hoping the code renders properly in the forum :) )

  • kokkieh · Staff ·

    Ah, the code didn’t render, but I tried it in the editor with a custom HTML block, and it does work there:

    https://d.pr/i/AzwrQs

    I just read your post again and see you want to add text inside it as well. For that, using a div in the HTML block, similar to the threads @musicdoc1 linked to, would be the way to go. For a circle, you’d use this:

    <div style="width: 350px; height: 350px; border: 5px solid black; border-radius: 100%; position: relative;"><div style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);">this is some text</div></div>

    For a square you’d use the same, but remove the border-radius, or for a square with rounded corners, just use a smaller border-radius. For a rectangle, just use different width and height.

    I don’t know how you’d do other shapes like triangles, though.

  • Unknown's avatar
    heyleeeo · Member ·

    Hey guys,

    Thank you very much for your attention, support and help! Kokkieh’s last tip really helped me and that was exactly what I wanted!

    Thank you very much!!

  • The topic ‘Geometric shapes on post’ is closed to new replies.