CSS rectangle with angular protrusions

CSS Rectangle with Angular Protrusions

In web design, we often need to use elements of various shapes to achieve various effects. Rectangles are one of the most common shapes, but what if we want them to have irregular corners or protrusions? In this article, I’ll show you how to create a rectangular effect with protruding corners using CSS.

Method 1: Using Pseudo-elements

By using CSS pseudo-elements, we can add additional elements to the original rectangle to create a protruding effect.

First, let’s create a simple rectangle element.

<div class="rectangle"></div> 

Next, we use CSS to style the rectangle and add pseudo-elements to create the raised corners.

.rectangle {
width: 200px;
height: 100px;
background-color: #f00;
position: relative;
} 

.rectangle::before {
content: '';
position: absolute;
top: -20px;
left: 50%;
transform: translateX(-50%);
width: 0;
height: 0;
border-style: solid;
border-width: 0 10px 20px 10px;
border-color: transparent transparent #f00 transparent;
} 

In this example, we create a raised corner effect by adding a triangle to the top of the rectangle using the ::before pseudo-element. We can control the size of the protrusion by adjusting the value of the border-width property.

Method 2: Using the clip-path property

In addition to pseudo-elements, we can also use the CSS clip-path property to create elements with complex shapes, including rectangles with protruding corners.

First, let’s create a simple rectangle element.

<div class="rectangle"></div>

Next, we use CSS to style the rectangle and use the clip-path property to create the protruding corners.

.rectangle { 
width: 200px; 
height: 100px; 
background-color: #0f0; clip-path: polygon(0 0, 100% 0, 100% 80%, 50% 100%, 0 80%); 
} 

In this example, we use the polygon() function to define a pentagonal clipping path, creating a rectangular shape with raised edges. We can change the position and shape of the corners by adjusting the coordinates in the polygon() function.

Method 3: Using CSS3 Border-Image

The final method uses the CSS3 border-image property to create a rectangular shape with raised corners.

First, we need to create a shape with an image containing the corners. Here, I’m using a simple example image, border.png.

Next, we define the rectangle’s style in CSS and use the border-image property to apply a sliced ​​image to the border.

.rectangle {
width: 200px;
height: 100px;
border-width: 4px;
border-image-source: url('border.png');
border-image-slice: 30 fill;
border-image-width: 4px;
border-image-outset: 0;
}

In this example, we specify the image to be applied using the border-image-source property, the border-image-slice property specifies the slice method, and the fill keyword specifies the border fill. By adjusting the values ​​of these properties, we can create rectangular shapes with different shapes and styles.

Using the three methods above, we can easily create various rectangular elements with angular effects on web pages. Choose the appropriate method to achieve the desired effect based on your needs and design style. Angular rectangles not only increase the visual appeal of a page, but also make the design more vivid and interesting.