CSS3 realizes various graphic effects of small arrows

It’s great to use CSS to realize various graphics. You don’t need to cut pictures anymore, you can just use CSS to realize it.

The most commonly used is the small triangle implemented with CSS

#triangle-up{
	display:inline-block;
	width:0;
	height:0;
	border-left:30px solid transparent;
	border-right: 30px solid transparent;
	border-bottom:50px solid red;}
#triangle-down {
	display:inline-block;
	width:0;
	height:0;
	border-left:30px solid transparent;
	border-right: 30px solid transparent;
	border-top:50px solid red;}
#triangle-left {
	display:inline-block;
	width:0;
	height:0;
	border-top: 30px solid transparent;
	border-right: 50px solid red;
	border-bottom: 30px solid transparent;}
#triangle-right
	display:inline-block;
	width:0;
	height:0;
	border-top: 30px solid transparent;
	border-left: 50px solid red;
	border-bottom: 30px solid transparent;}

#triangle-topleft {
    display:inline-block;
    width: 0;
    height: 0;
    border-top: 50px solid red;
    border-right: 50px solid transparent;
}
#triangle-topright {
    display:inline-block;
    width: 0;
    height: 0;
    border-top: 50px solid red;
    border-left: 50px solid transparent;
}
#triangle-bottomleft {
    display:inline-block;
    width: 0;
    height: 0;
    border-bottom: 50px solid red;
    border-right: 50px solid transparent;
}
#triangle-bottomright {
    display:inline-block;
    width: 0;
    height: 0;
    border-bottom: 50px solid red;
    border-left: 50px solid transparent;
}

Through such small arrows, we can implement the style of verification prompt layer arrows in the project, which is very practical and we no longer have to worry about the prompt layer style.

We have seen that the transparent attribute is used in the style of the CSS small arrow. What does transparent mean? So I looked up the CSS reference manual, and the definition is:

Used to specify the fully transparent color.

Transparent is a shorthand for fully transparent black (black), that is, a value like rgba(0,0,0,0).
In CSS1, transparent is used as a parameter value of background-color to indicate a transparent background.
In CSS2, border-color also began to accept transparent as a parameter value.
In CSS3, transparent is extended to any property that has a color value.

I summarize the meaning of transparent as transparent and colorless.

As shown in the picture, the triangle is actually realized by the four borders of a div with a width and height of 0. If we want to realize a downward arrow, we must make the left and right borders of the div transparent (transparent but the left and right borders still take up space).

What is the idea behind the upper left arrow? The right and bottom borders of the div are transparent, so the arrow in the upper left corner is exposed.

CSS3 heart shape

#heart {
    position: relative;
    width: 100px;
    height: 90px;
}
#heart:before,
#heart:after {
    position: absolute;
    content: "";
    left: 50px;
    top: 0;
    width: 50px;
    height: 80px;
    background: red;
    -moz-border-radius: 50px 50px 0 0;
    border-radius: 50px 50px 0 0;
    -webkit-transform: rotate(-45deg);
       -moz-transform:rotate(-45deg);
        -ms-transform:rotate(-45deg);
         -o-transform: rotate(-45deg);
            transform: rotate(-45deg);
    -webkit-transform-origin: 0 100%;
       -moz-transform-origin: 0 100%;
        -ms-transform-origin: 0 100%;
         -o-transform-origin: 0 100%;
            transform-origin: 0 100%;
}
#heart:after {
    left: 0;
    -webkit-transform: rotate(45deg);
       -moz-transform:rotate(45deg);
        -ms-transform:rotate(45deg);
         -o-transform: rotate(45deg);
            transform: rotate(45deg);
    -webkit-transform-origin: 100% 100%;
       -moz-transform-origin: 100% 100%;
        -ms-transform-origin: 100% 100%;
         -o-transform-origin: 100% 100%;
            transform-origin :100% 100%;
}

This is the end of this article about how to achieve various graphic effects of small arrows with CSS3. For more relevant CSS small arrow content, please search 123WORDPRESS.COM’s previous articles or continue to browse the related articles below. I hope everyone will support 123WORDPRESS.COM in the future!

<<: Detailed explanation of the process of using docker to build minio and java sdk

>>: A brief introduction to bionic design in Internet web design

CSS3 realizes various graphic effects of small arrows

Two ways to open and close the mysql service

Mysql8.0 uses window functions to solve sorting problems

Specific example of MySQL multi-table query

Implementation of whack-a-mole game in JavaScript

Docker link realizes container interconnection

Learn MySQL database in one hour (Zhang Guo)

Autotrash tool for Linux to automatically delete old junk files at a scheduled time

3 solutions to make your website support old versions of IE6, 7, 8, and 9 browsers

Vue implements the method of displaying percentage of echart pie chart legend

A collection of information about forms and form submission operations in HTML

Recommend

dl, dt, dd list label examples

Notes on using the blockquote tag

mysql 8.0.18 mgr installation and its switching function

HTML reuse techniques

CSS injection knowledge summary

Implementing carousel with native JavaScript

Detailed explanation of Mysql's method of optimizing order by statement

A brief discussion on read-only and disabled attributes in forms

VMware vSAN Getting Started Summary

Specific usage of Vue's new toy VueUse

CSS Sticky Footer Several Implementations

Detailed explanation of the use of cloud native technology kubernetes scheduling unit pod

A Brief Analysis of MySQL Connections and Collections

Key issues and solutions for web page access speed

Common parameters of IE web page pop-up windows can be set by yourself