Photo by John Mccann on Unsplash

How to properly use Clip-path

In this article I share ten examples of using the clip-path property in CSS to create a variety of shapes:

alternatively create a syle.css

.triangle {
    width: 200px;
    height: 200px;
    background-color: #3498db;
    clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}

Explanation

1. Class Selector (.triangle):

• This CSS rule applies to any HTML element with the class name triangle.

1. Width and Height (width: 200px; height: 200px;):

• These properties set the dimensions of the element to 200 pixels wide and 200 pixels high. This forms the base square shape that will be transformed into a triangle.

1. Background Color (background-color: #3498db;):

• This property sets the background color of the element to #3498db, which is a shade of blue. This color will fill the triangle shape.

1. Clip Path (clip-path: polygon(50% 0%, 0% 100%, 100% 100%);):

• The clip-path property is used to define a clipping region. In this case, it uses the polygon function to create a triangular shape.
• The polygon function takes a list of points (coordinates) that define the shape's vertices. Each point is specified as a percentage relative to the element's width and height.

Points Breakdown

• First Point (50% 0%):
• This point is at the top middle of the element (50% from the left and 0% from the top). It corresponds to the peak of the triangle.
• Second Point (0% 100%):
• This point is at the bottom left corner of the element (0% from the left and 100% from the top). It corresponds to the bottom-left corner of the triangle.
• Third Point (100% 100%):
• This point is at the bottom right corner of the element (100% from the left and 100% from the top). It corresponds to the bottom-right corner of the triangle.

Translated to pt

1. Seletor de Classe (.triangle):

• Esta regra CSS é aplicada a qualquer elemento HTML com o nome de classe triangle.

1. Largura e Altura (width: 200px; height: 200px;):

• Estas propriedades definem as dimensões do elemento para 200 pixels de largura e 200 pixels de altura. Isso forma a base quadrada que será transformada em um triângulo.

1. Cor de Fundo (background-color: #3498db;):

• Esta propriedade define a cor de fundo do elemento como #3498db, que é um tom de azul. Esta cor preencherá a forma do triângulo.

1. Clip Path (clip-path: polygon(50% 0%, 0% 100%, 100% 100%);):

• A propriedade clip-path é usada para definir uma região de recorte. Neste caso, ela usa a função polygon para criar uma forma triangular.
• A função polygon recebe uma lista de pontos (coordenadas) que definem os vértices da forma. Cada ponto é especificado como uma porcentagem relativa à largura e altura do elemento.

Detalhamento dos Pontos

• Primeiro Ponto (50% 0%):
• Este ponto está no meio superior do elemento (50% da esquerda e 0% do topo). Corresponde ao pico do triângulo.
• Segundo Ponto (0% 100%):
• Este ponto está no canto inferior esquerdo do elemento (0% da esquerda e 100% do topo). Corresponde ao canto inferior esquerdo do triângulo.
• Terceiro Ponto (100% 100%):
• Este ponto está no canto inferior direito do elemento (100% da esquerda e 100% do topo). Corresponde ao canto inferior direito do triângulo.

.circle {
    width: 200px;
    height: 200px;
    background-color: #e74c3c;
    clip-path: circle(50% at 50% 50%);
}

Explicação

1. Seletor de Classe (.circle):

• Esta regra CSS é aplicada a qualquer elemento HTML com o nome de classe circle.

1. Largura e Altura (width: 200px; height: 200px;):

• Estas propriedades definem as dimensões do elemento para 200 pixels de largura e 200 pixels de altura. Isso forma a base quadrada que será transformada em um círculo.

1. Cor de Fundo (background-color: #e74c3c;):

• Esta propriedade define a cor de fundo do elemento como #e74c3c, que é um tom de vermelho. Esta cor preencherá a forma do círculo.

1. Clip Path (clip-path: circle(50% at 50% 50%);):

• A propriedade clip-path é usada para definir uma região de recorte. Neste caso, ela usa a função circle para criar uma forma circular.
• A função circle recebe um valor de raio seguido de um ponto central, ambos especificados como porcentagens relativas à largura e altura do elemento.

Detalhamento dos Valores

• Raio (50%):
• Este valor especifica o raio do círculo como 50% da largura do elemento. Como a largura é 200 pixels, o raio do círculo será 100 pixels, fazendo com que o círculo se ajuste perfeitamente ao elemento.
• Centro do Círculo (at 50% 50%):
• Este valor define o centro do círculo no ponto médio do elemento (50% da esquerda e 50% do topo).

create an index.html file

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Clip Path Shapes</title>
    <style>
        .triangle, .circle, .ellipse, .pentagon, .hexagon, .octagon, .star, .rhombus, .parallelogram, .heart {
            margin: 20px;
        }

        .triangle {
            width: 200px;
            height: 200px;
            background-color: #3498db;
            clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
        }

        .circle {
            width: 200px;
            height: 200px;
            background-color: #e74c3c;
            clip-path: circle(50% at 50% 50%);
        }

        .ellipse {
            width: 200px;
            height: 100px;
            background-color: #2ecc71;
            clip-path: ellipse(50% 50% at 50% 50%);
        }

        .pentagon {
            width: 200px;
            height: 200px;
            background-color: #9b59b6;
            clip-path: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%);
        }

        .hexagon {
            width: 200px;
            height: 200px;
            background-color: #f1c40f;
            clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
        }

        .octagon {
            width: 200px;
            height: 200px;
            background-color: #e67e22;
            clip-path: polygon(30% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30%);
        }

        .star {
            width: 200px;
            height: 200px;
            background-color: #e74c3c;
            clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
        }

        .rhombus {
            width: 200px;
            height: 200px;
            background-color: #3498db;
            clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
        }

        .parallelogram {
            width: 200px;
            height: 100px;
            background-color: #2ecc71;
            clip-path: polygon(25% 0%, 100% 0%, 75% 100%, 0% 100%);
        }

        .heart {
            width: 200px;
            height: 200px;
            background-color: #e74c3c;
            clip-path: polygon(50% 15%, 61% 15%, 72% 24%, 79% 36%, 79% 50%, 50% 75%, 21% 50%, 21% 36%, 28% 24%, 39% 15%);
        }
    </style>
</head>
<body>
    <div class="triangle"></div>
    <div class="circle"></div>
    <div class="ellipse"></div>
    <div class="pentagon"></div>
    <div class="hexagon"></div>
    <div class="octagon"></div>
    <div class="star"></div>
    <div class="rhombus"></div>
    <div class="parallelogram"></div>
    <div class="heart"></div>
</body>
</html>