CSS-Shapes are made by the use of Cascade Styling Sheets to make HTML elements into shapes and images. The most basic shapes include triangles, squares, and circles but can be made into more advance shapes such as hearts, octagons, and stars.
CSS Shapes pertain to questions about the rendering, bugs, and technical problems of HTML/CSS made shapes. These can be used on any tag but needs to be displayed as a block or inline-block elements. CSS Shapes can be used to direct viewers attention to certain elements on the page, make graphics, page structure, and objects.
Here is a simple CSS triangle,
.left-tri {
width: 0;
height: 0;
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
border-right: 10px solid brown;
}
Here is the most common CSS shape,
.square {
width: 100px;
height: 100px;
background: brown;
}
One benefit of using a CSS Shape is the ability to render to any monitor's display without becoming pixelated. CSS Shapes are very similar to an SVG(Scalable Vector Graphic) but remove the use of an image file. They also can allow the developer to rely more on CSS to style the page.
CSS-Shapes (CSS Exclusion) is a new tool Adobe has been working on. Currently the browser support is very poor. With CSS Exclusion you can add paths for text to wrap around or inside of that object to get flush text structure without an image. (Example, must enable CSS Exclusion on your browser to view)
Not all CSS Shapes have back browser support, for CSS Exclusions refer to the Browser Support tab.
References
Browser Support
Shape Generator Tools
- CSS Shape Generator - An online tool to auto-create a few pre-defined basic CSS shapes.
