HTML/CSS section with a specific values and shape-CodePudding

I'm thinking about a website design, kinda new to HTML/CSS and JS. My issue is related only to HTML and CSS. I'd like to make a sort of polygon shape that would be either transparent or white in which I can put text in and it would wrap the text according to the shape of the box. I'm attaching an image of how I'm thinking of making it but I can't seem to come to conclusion. I was thinking of making a normal polygon shape just like that and then separate the text into different classes and then wrap them and position them as they are but that seems kinda messy. Is there any better simpler way of doing this? Thanks in advance.enter image description here I tried making it like this with a polygon shape, and then making different classes for text and then wrapping it so it fits into the shape. That honestly feels a bit messy. Any insights of how could I do that pls?

<section>
      <div >
        <div ></div>
      </div>
    </section>

    <style>
      .body {
        margin: 0;
        padding: 0;
        height: 100vh;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-wrap: wrap;
      }

      .container {
        width: 500px;
        height: 450px;
        border: 5px solid lightgrey;
        background: blue;
        position: relative;
        margin: 5px;
        display: flex;
        justify-content: center;
        align-items: center;
      }

      .clip-path-inset-square {
        width: 250px;
        height: 250px;
        background-color: brown;
        clip-path: polygon(
          60% 70%,
          60% 30%,
          100% 30%,
          100% 0%,
          2% 1%,
          0% 100%,
          100% 100%,
          100% 70%
        );
      }
    </style>

CodePudding user response：

Yes, there is a simpler way to do this. You can achieve the desired result using CSS shape-outside and float property.

Here's an example of how you can do this:

HTML:-

<div >
  <div >
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed fringilla orci eu egestas placerat. Quisque auctor, erat sit amet bibendum fringilla, nibh nulla auctor erat, id tempor leo mauris euismod mi. </p>
  </div>
</div>

CSS-

.container {
      width: 500px;
      height: 450px;
      border: 5px solid lightgrey;
      background: blue;
      position: relative;
      margin: 5px;
      display: flex;
      justify-content: center;
      align-items: center;
      overflow: hidden;
    }
    
    .shape {
      width: 250px;
      height: 250px;
      background-color: brown;
      float: left;
      shape-outside: polygon(60% 70%, 60% 30%, 100% 30%, 100% 0%, 2% 1%, 0% 100%, 100% 100%, 100% 70%);
      clip-path: polygon(60% 70%, 60% 30%, 100% 30%, 100% 0%, 2% 1%, 0% 100%, 100% 100%, 100% 70%);
      padding: 10px;
    }

This code uses the shape-outside property to create a custom shape and the float property to wrap the text inside the shape. The clip-path property is used to clip the shape to the desired size.