Revision:
CSS gives us the opportunity to create multiple shapes. Making various shapes in CSS is easy. Squares and rectangles are the most common and natural shapes in web development. You need to add width and height, and that's it. Adding border-radius and you have circles and ovals.
More complex shapes require to add :before and :after pseudo-elements or more HTML. That gives us two more tools to create something complex. In terms of creating different shapes, your best friends will be transform and position.
CSS shapes describe geometric shapes for use in CSS. CSS shapes allow to make interesting and unique layouts by defining geometric shapes, images, and gradients that text content can flow around. Creating shapes usually needs a combination of using width, height, top, right, left, border, bottom, transform, and pseudo-elements. CSS is capable of making all types of shapes.
<div class="grid_A">
<div style="margin-left:3vw;" id="square">square</div>
<div style="margin-left:3vw;" id="rectangle">rectangle</div>
</div>
<style class="spec">
#square {width: 10vw; height: 10vw; background: green; color: red;}
#rectangle {width: 10vw; height: 10vw; background: blue; color: red;}
</style>
<style>
#circle{width: 10vw; height: 10vw; background: blue; color: red; border-radius:50%;}
</style>
<div>
<div style="margin-left:3vw;" id="circle">circle</div>
</div>
<style>
#oval{width: 20vw; height: 10vw; background: blue; color: red; border-radius: 10vw / 5vw;}
</style>
<div>
<div style="margin-left:3vw;" id="oval">oval</div>
</div>
<style>
#triangle_up {width: 0; height: 0; border-left: 5vw solid transparent; border-right: 5vw solid transparent; border-bottom: 10vw solid blue; color:red;}
#triangle_down {width: 0; height: 0; border-left: 5vw solid transparent; border-right: 5vw solid transparent; border-top: 10vw solid blue; color:red;}
#triangle_left {width: 0; height: 0; border-top: 5vw solid transparent; border-right: 10vw solid blue; border-bottom: 5vw solid transparent; color:red;}
#triangle_right {width: 0; height: 0; border-top: 5vw solid transparent; border-left: 10vw solid blue; border-bottom: 5vw solid transparent; color:red;}
#triangle_topleft {width: 0; height: 0; border-top: 10vw solid blue;color:red;border-right: 10vw solid transparent;}
#triangle_topright {width: 0; height: 0; border-top: 10vw solid blue;color:red;border-left: 10vw solid transparent;}
#triangle_bottomleft {width: 0; height: 0; border-bottom: 10vw solid blue;color:red;border-right: 10vw solid transparent;}
#triangle_bottomright {width: 0; height: 0; border-bottom: 10vw solid blue;color:red;border-left: 10vw solid transparent;}
</style>
<div class="grid_C">
<div style="margin-left:3vw;" id="triangle_up">triangle up</div>
<div style="margin-left:3vw;" id="triangle_down">triangle down</div>
<div style="margin-left:3vw;" id="triangle_left">triangle left</div>
<div style="margin-left:3vw;" id="triangle_right">triangle right</div>
<div style="margin-left:3vw;" id="triangle_topleft">triangle top left</div>
<div style="margin-left:3vw;" id="triangle_topright">triangle top right</div>
<div style="margin-left:3vw;" id="triangle_bottomleft">triangle bottom left</div>
<div style="margin-left:3vw;" id="triangle_bottomright">triangle bottom right</div>
</div>
<div>
<div class="box">
<div class="box-inner">
<div class="triangle bottom"></div>
<div class="triangle right"></div>
<div class="triangle top"></div>
<div class="triangle left"></div>
</div>
</div>
</div>
<style>
.box {margin-left:5vw; padding: 1.5vw; background-color: lightgreen; border-radius: 1vw; display: flex;align-items: center; justify-content: center;}
.triangle {display: inline-block; margin-right: 1vw; border: solid 1vw transparent;}
.triangle.bottom {border-top-color: darkblue;}
.triangle.top {border-bottom-color: darkgreen;}
.triangle.left {border-right-color: red;}
.triangle.right {border-left-color: yellow;}
</style>
<div id="driehoek"></div>
<style>
#driehoek {margin-left:5vw; width: 0; height: 0; border-left: 4vw solid transparent; border-right: 4vw solid transparent; border-bottom: 8vw solid red;}
</style>
<style>
#curvedarrow {position: relative; width: 0; height: 0; border-top: 1.5vw solid transparent; border-right: 2vw solid red; color: blue; transform: rotate(10deg);}
#curvedarrow:after {content: "";position: absolute; border: 0 solid transparent; border-top: 0.6vw solid red; border-radius: 1vw 0 0 0; top: -2vw;
left: -2vw; width: 3vw; height: 3vw; transform: rotate(45deg);}
</style>
<div style="margin-left:3vw;" id="curvedarrow">curved tail arrow</div>
<div class="box">
<div class="box-inner">
<div class="arrow bottom"></div>
<div class="arrow top"></div>
<div class="arrow right"></div>
<div class="arrow left"></div>
</div>
</div>
<style>
.box-1 {padding: 1.5vw; background-color: lightgreen; border-radius: 1.6vw; display: flex; align-items: center; justify-content: center; width: 30vw; height: auto;}
.arrow {display: inline-block;margin-right: 1vw;width: 0;height: 0; border: 1.6vw solid; border-color: transparent #cddc39 transparent transparent; position: relative;}
.arrow::after {content: ""; position: absolute; right: -2vw; top: -1.6vw; border: 1.6vw solid; border-color: transparent #fff transparent transparent;}
.arrow.bottom {transform: rotate(270deg);}
.arrow.top {transform: rotate(90deg);}
.arrow.left {transform: rotate(180deg);}
.arrow.right {transform: rotate(0deg);}
</style>
<style>
#trapezoid {border-bottom: 10vw solid blue; color:red; border-left: 2.5vw solid transparent; border-right: 2.5vw solid transparent; height: 0; width: 10vw;}
#parallelogram {width: 15vw; height: 10vw; transform: skew(20deg); background: blue; color:red;}
#star-six {width: 0; height: 0; border-left: 5vw solid transparent; border-right: 5vw solid transparent; border-bottom: 10vw solid blue; color: red; position: relative;}
#star-six:after {width: 0; height: 0; border-left: 5vw solid transparent; border-right: 5vw solid transparent; border-top: 10vw solid blue; color: red; position: absolute; content: ""; top: 3vw;
left: -5vw; z-index:-1;}
#star-five {margin: 2vw 0; position: relative; display: block; color: red; width: 0vw; height: 0vw; border-right: 10vw solid transparent; border-bottom: 7vw solid blue; border-left: 10vw solid transparent;
transform: rotate(35deg); z-index:5;}
#star-five:before {border-bottom: 8vw solid blue; border-left: 3vw solid transparent; border-right: 3vw solid transparent; position: absolute; height: 0; width: 0; top: -4.5vw; left: -6.5vw; display:
block; content: ''; transform: rotate(-35deg);z-index:-1;}
#star-five:after {position: absolute; display: block; color: red; top: 0.3vw; left: -10.5vw; width: 0vw; height: 0vw; border-right: 5vw solid transparent; border-bottom: 7vw solid blue; border-left:
10vw solid transparent; transform: rotate(-70deg); content: ''; z-index: -2;}
</style>
<div class="grid_C">
<div style="margin-left:3vw;" id="trapezoid">trapezoid</div>
<div style="margin-left:3vw;" id="parallelogram">parallelogram</div>
<div style="margin-left:3vw;" id="star-six">star-6-points</div>
<div style="margin-left:3vw;" id="star-five">star-5-points</div>
</div>
<style>
#pentagon {position: relative; width: 5.4vw; top:2vw; box-sizing: content-box; border-width: 5vw 1.8vw 0vw; border-style: solid; border-color: blue transparent; color:red;}
#pentagon:before {content: ""; position: absolute; height: 0; width: 0;top:-7.5vw; left:-1.8vw;border-width: 0 4.5vw 2.5vw; border-style: solid; border-color: transparent transparent blue;}
#hexagon{width:10vw; height: 5.7735vw; top: 2vw; background:blue; position: relative;color:red;}
#hexagon::before {content: ""; position: absolute;top: -2.88675vw;left: 0;width: 0;height: 0vw; border-left: 5vw solid transparent; border-right: 5vw solid transparent; border-bottom: 2.88675vw solid blue;}
#hexagon::after {content: ""; position: absolute; bottom: -2.88675vw; left: 0; width: 0; height: 0; border-left: 5vw solid transparent; border-right: 5vw solid transparent; border-top: 2.88675vw solid blue;}
#octagon {width:15.7vw; height: 10vw; background: blue; position: relative; color: red;z-index:4;}
#octagon:before {content: ""; width: 10vw; height: 0; position: absolute; top: 0; left: 0; border-bottom: 2.9vw solid blue;border-left: 2.9vw solid #eee; border-right: 2.9vw solid #eee;z-index: -2;}
#octagon:after {content: "";width: 10vw; height: 0; position: absolute; bottom: 0; left: 0; border-top: 2.9vw solid blue; border-left: 2.9vw solid #eee; border-right: 2.9vw solid #eee; z-index:-3;}
</style>
<div>
<div style="margin-left:3vw;" id="pentagon">pentagon</div>
<div style="margin-left:3vw;" id="hexagon">hexagon</div>
<div style="margin-left:3vw;" id="octagon">octagon</div>
</div>
<style>
#heart {position: relative; width: 10vw; height: 9vw; color:red;}
#heart:before,
#heart:after {position: absolute; content: ""; left: 5vw;top: 0; width: 5vw; height: 8vw; background: blue; border-radius: 5vw 5vw 0 0; transform: rotate(-45deg); transform-origin: 0 100%;
z-index:-1;}
#heart:after {left: 0; transform: rotate(45deg); transform-origin: 100% 100%;}
#infinity {position: relative; width: 21.2vw; height: 10vw; box-sizing: content-box; color:red;}
#infinity:before, #infinity:after {content: ""; box-sizing: content-box; position: absolute; top: 0; left: 0; width: 6vw; height: 6vw; border: 2vw solid blue; border-radius: 5vw 5vw 0 5vw;
transform: rotate(-45deg); z-index:-2;}
#infinity:after {left: auto; right: 0; border-radius: 5vw 5vw 5vw 0; transform: rotate(45deg);}
#egg {display: block; width: 12.6vw; height: 18vw; background-color: blue; color:red; border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;}
</style>
<div class="grid_B">
<div style="margin-left:3vw;" id="heart">heart</div>
<div style="margin-left:3vw;" id="infinity">infinity</div>
<div style="margin-left:3vw;" id="egg">egg</div>
</div>
<style>
#plus {width: 2vw; height: 10vw; background: blue; color:red; position: relative; left:2vw;}
#plus:after {content: ''; position: absolute; top: 50%; transform: translateY(-50%);left:-3.7vw; width: 10vw; height: 2vw; background: blue;}
#brackets {width: 10vw; height: 10vw; border: 1vw solid blue;color:red; border-top: none; border-bottom: none; border-radius: 3vw/9vw;}
#lock {font-size: 1vw; position: relative; top: 4vw; width: 10vw; height: 6vw; border-radius: 1.5vw; box-sizing: border-box; border: 1.5vw solid blue; border-right-width: 4vw;
border-left-width: 4vw; color:red;}
#lock::before {content: '';box-sizing: border-box; position: absolute; top: -5vw; left: 50%; width: 6vw; height: 5vw; margin-left: -2.8vw; border: 1vw solid blue; border-top-left-radius: 3vw;
border-top-right-radius: 3vw;z-index:-2;}
#lock::after {content: "";box-sizing: border-box; position: absolute; top: -0.5vw; left: 38%; width: 2.5vw; height: 4vw; border: .4vw solid blue;border-radius: 2vw; margin-left: -1vw;
z-index: -1;}
#magnifying{font-size: 1vw; display: inline-block; width: 6vw; box-sizing: content-box; height: 6vw; border: 0.5vw solid blue; position: relative; border-radius: 5vw; color:red;}
#magnifying::before {content: ''; display: inline-block; position: absolute; right: -4vw; bottom: -1vw; border-width: 0; background: blue; width: 5vw;height: 1vw;transform: rotate(35deg);}
</style>
<div class="grid_C">
<div style="margin-left:3vw;" id="plus">plus</div>
<div style="margin-left:3vw;" id="brackets">brackets</div>
<div style="margin-left:3vw;" id="lock">lock</div>
<div style="margin-left:3vw;" id="magnifying">magnifying glass</div>
</div>
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.
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.
<div>
<div id="square"></div>
<p>Lorem Ipsum is simply dummy...</p><br>
</div>
<style>
#square {margin-left:5vw; float: left; width: 10vw; height: 10vw; shape-outside: inset();background-color: red; }
</style>
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.
<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: 10vw; height: 10vw; shape-outside: circle(50%) at center;clip-path:circle(50%); background-color:burlywood;}
</style>
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.
<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 60% 60%); clip-path:ellipse(5vw 10vw at 40% 50%); width: 20vw; height: 20vw; float: right; opacity:0.2; background-color:purple;}
</style>
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.
<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: 30vw; float: right; opacity:0.2;
background-color:yellow;}
</style>