What is Spectre Shapes?

In this article, we will learn Spectre Shapes,This free Spectre tutorial for complete beginners will help you learn Spectre from scratch.

Spectre Shapes - ❤️Spectre Tutorials In 2024

Spectre Shapes are used to create different shapes for HTML elements. This is one of the most useful utilities in Spectre. To change any element’s shape, you just need to include this class.

Spectre Shapes class:

s-circle: This class is used to make the element circle-shaped.
s-rounded: This class is used to make the element rounded

Syntax:

<div class="s-rounded">
   ....
</div>

Example: Below example illustrate the Spectre Shapes using both the above classes.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <title>SPECTRE Shape Class</title> 
    <link rel="stylesheet"
        href= 
"https://unpkg.com/spectre.css/dist/spectre.min.css"> 
    <link rel="stylesheet"
        href= 
"https://unpkg.com/spectre.css/dist/spectre-exp.min.css"> 
    <link rel="stylesheet"
        href= 
"https://unpkg.com/spectre.css/dist/spectre-icons.min.css"> 
    <style> 
        div { 
            height: 100px; 
            width: 100px; 
        } 
    </style> 
</head> 
  
<body> 
    <center> 
        <h1 class="text-success">w3wiki</h1> 
        <strong>SPECTRE Shape Class</strong> 
        <br> 
        <div class="bg-success s-circle">Circular</div> 
        <div class="bg-success s-rounded">Rounded</div> 
    </center> 
</body> 
</html> 

Output:

Spectre Shapes

Reference: https://picturepan2.github.io/spectre/utilities/shapes.html