CSS corner marks

CSS Corner Badge

In web development, badges are a common marker, usually used to display information such as quantity, status, and category. Using CSS, we can easily create a variety of corner label styles. This article will detail how to use CSS to create various corner label styles, including square corner labels, round corner labels, and corner labels with numbers.

Square Corner Label

A square corner label is the simplest type of corner label, typically a simple square area used to mark special information. By setting the border, background color, and position of the box, we can easily create a square corner label effect.

HTML Structure

First, let’s create a simple HTML structure to display text with a square badge:

<div class="container"> 
<span class="badge">New</span> 
Some text here 
</div> 

CSS Style

Next, we use CSS to define the style of the square badge:

.container { 
position: relative; 
padding: 10px; 
} 

.badge { 
position: absolute; 
top: -10px; 
right: -10px; 
background-color: red; 
color: white;
padding: 5px 10px;
border-radius: 5px;
}

In the above CSS, we first set the .container element’s position to relative. This allows us to position the .badge element relative to the .container by setting its position to absolute. We then position the .badge badge in the top-right corner and define styles such as the background color, font color, padding, and border radius.

Through these CSS settings, we’ve successfully created a simple square badge effect, and you can adjust various style parameters as needed.

Rounded Corner Labels

In addition to square corner labels, rounded corner labels are also a common corner label style, often used to indicate important information or special status. By setting the corner radius, background color, and position of the box, we can easily create a beautiful rounded corner label effect.

HTML Structure

We can use a similar HTML structure to display text with rounded corners:

<div class="container">
<span class="badge-circle">10</span>
Some text here
</div>

CSS Styles

Next, we define the styles of the rounded badge using CSS styles:

.badge-circle {
position: absolute;
top: -10px;
right: -10px;
background-color: red;
color: white;
padding: 5px 10px;
border-radius: 50%; 
}

In the above CSS style, we also set the position of the .badge-circle element to absolute and set the border radius to 50%, giving the badge a circular effect. Other style parameters are similar to those for square badges and can be adjusted as needed.

Through the above CSS style settings, we have successfully created a simple circular badge effect, and you can adjust various style parameters as needed.

Numbered Badges

In addition to simple shaped badges, we can also use CSS to create badges with numbers to indicate information such as quantity, count, or level. By setting the background color, font style, and position of the box, we can easily create a badge with numbers.

HTML Structure

We can use a similar HTML structure to display a badge with numbers:

<div class="container"> 
<span class="badge-number">5</span> 
Some text here 
</div> 

CSS Style

Next, we use CSS to define the style of the badge with numbers:

.badge-number { 
position: absolute; 
top: -10px; 
right: -10px; 
background-color: red; 
color: white; 
padding: 5px 10px; 
border-radius: 50%; 
font-size: 12px; 
}

In the above CSS style, in addition to basic style settings, we can also use the font-size property to set the font size of the numbers in the corner label. This allows you to adjust the size of the numbers as needed to better display the corner label.

Through the above CSS style settings, we have successfully created a corner label effect with numbers, and we can adjust various style parameters as needed. By combining different style settings, we can achieve a variety of different corner label effects, making web page content more vivid and colorful.

Summary

Through this article, we learned how to use CSS styles to create various different corner label effects, including square corner labels, round corner labels, and corner labels with numbers. Using simple HTML structure and CSS style settings, we can easily create a variety of vivid corner label styles, making web page content more intuitive and attractive.