draw shapes

"shape-outside" property and "clip-path" property

The "shape-outside" property let you define a shape that the text will wrap/flow around. The "clip-path" property creates a clipping region that sets what part of an element should be shown. Parts that are inside the region are shown, while those outside are hidden.

example: shape-outside: inset

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. Lorem Ipsum is dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. Lorem Ipsum is dummied text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. Lorem Ipsum is dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.

code:

 
                    <div>
                        <div id="square"></div>
                        <p>Lorem Ipsum is simply dummy...</p><br>
                    </div>
                    <style>
                        #square {margin-left:5vw; float: left; width: 20vw; height: 20vw; shape-outside: inset();background-color: red; }
                    </style>

example: shape-outside - circle

code:

 
                    <div>
                        <div id="circle"></div>
                        <p class="spec" style="margin-left:5vw;"> Lorem Ipsum is simply dummy 
                        text of the printing and typesetting industry... </p><br>
                    </div>
                    <style>
                        #circle{margin-left:5vw; float: left; width: 20vw; height: 20vw; shape-outside: circle(50%) at center;clip-path:circle(50%);
                            background-color:burlywood;}
                    </style>

example: shape-outside - ellipse

code:

 
                    <div>
                        <div id="ellipse"></div>
                        <p class="spec" style="margin-left:5vw;"> Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
                        Lorem Ipsum has been the </p><br>
                    </div>
                    <style>
                    #ellipse{shape-outside: ellipse(12vw 20vw at 40% 50%); clip-path:ellipse(10vw 20vw at 40% 50%); width: 30vw; height: 50vw; 
                        float: right; opacity:0.2; background-color:purple;}
                    </style>

example: shape-outside - polygon

code:

 
                    <div>
                        <div id="polygon"></div>
                        <p class="spec" style="margin-left:5vw;"> Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
                        Lorem Ipsum has been ... </p><br>
                    </div>
                    <style>
                        #polygon{shape-outside: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);  clip-path:polygon(50% 0, 100% 50%, 50% 100%, 0 50%); 
                            width: 30vw; height: 50vw; float: right; opacity:0.2; background-color:yellow;}
                    </style>

CSS properties - shape-outside

"shape-outside" property and "clip-path" property