CSS3 realizes various graphic effects of small arrows

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

Recommend

Node and Python two-way communication implementation code

Table of contents Process Communication Bidirecti...

Example of usage of keep-alive component in Vue

Problem description (what is keep-alive) keep-ali...

Detailed explanation of three ways to import CSS files

There are three ways to introduce CSS: inline sty...

How to make full use of multi-core CPU in node.js

Table of contents Overview How to make full use o...

Small program to implement a simple calculator

This article example shares the specific code of ...

Differences between ES6 inheritance and ES5 inheritance in js

Table of contents Inheritance ES5 prototype inher...

Several ways to switch between Vue Tab and cache pages

Table of contents 1. How to switch 2. Dynamically...

Synchronize the full and incremental data of a specific MySQL table to the message queue - Solution

Table of contents 1. Original demand 2. Solution ...

Solution to the failure of docker windows10 shared directory mounting

cause When executing the docker script, an error ...

7 Ways to Write a Vue v-for Loop

Table of contents 1. Always use key in v-for loop...

WeChat applet uses the video player video component

This article example shares the specific code of ...

Detailed explanation of simple html and css usage

I will use three days to complete the static page...

How to add ansible service in alpine image

Use apk add ansible to add the ansible service to...

Detailed explanation of MySQL phantom reads and how to eliminate them

Table of contents Transaction Isolation Level Wha...

HTML table markup tutorial (15): table title

<br />This tag can be used to directly add a...