Draw basic graphics using CSS3
This article mainly introduces CSS3 drawing basic graphics, relevant information on circles, ovals, triangles, etc. Friends in need can refer to
CSS3 Circle
#css3-circle{
width: 150px;
height: 150px;
border-radius: 50%;
background-color: #232323;}CSS3 Oval
#css3-elipse{
width: 200px;
height: 100px;
border-radius: 50%;
background-color: #232323;}CSS3 Triangle
#css3-triangle{
width: 0;
height: 0;
border-left: 100px solid transparent;
border-right: 100px solid transparent;
border-bottom: 150px solid #232323;}CSS3 Parallelogram
#css3-parallelogram{
width: 200px;
height: 100px;
background: #232323;
-webkit-transform: skew(-45deg); -moz-transform: skew(-45deg); -o-transform: skew(-45deg);
transform: skew(-45deg);
}CSS3 Trapezium
#css3-trapezoid{
width: 100px;
height: 0;
border-bottom: 100px solid #232323;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
}CSS3 Hexagram
#css3-six-star{
width: 0;
height: 0;
position: relative;
border-bottom: 100px solid #232323;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
}#css3-six-star:after{
content: "";
width: 0;
height: 0;
position: absolute;
left: -50px;
top: 35px;
border-top: 100px solid #232323;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
}CSS3 Pentagram
#css3-five-star{
width: 0px;
height: 0px;
margin: 50px 0;
position: relative;
display: block;
color: #232323;
border-right: 100px solid transparent;
border-bottom: 70px solid #232323;
border-left:100px solid transparent; -moz-transform:rotate(35deg); -webkit-transform: rotate(35deg); -ms-transform:rotate(35deg); -o-transform:rotate(35deg);
}#css3-five-star:before{
border-bottom: 80px solid #232323;;
border-left: 30px solid transparent;
border-right: 30px solid transparent;
position: absolute;
height: 0;
width: 0;
top: -45px;
left: -63px;
display: block;
content: ''; -webkit-transform: rotate(-35deg); -moz-transform:rotate(-35deg); -ms-transform:rotate(-35deg); -o-transform:rotate(-35deg);
}#css3-five-star:after{
position: absolute;
display: block;
color: #232323;
top: 3px;
left: -105px;
width: 0px;
height: 0px;
border-right: 100px solid transparent;
border-bottom: 70px solid #232323;
border-left: 100px solid transparent; -webkit-transform: rotate(-70deg); -moz-transform:rotate(-70deg); -ms-transform:rotate(-70deg); -o-transform:rotate(-70deg);
content: '';
}CSS3 Pentagon
#css3-pentagon {
position: relative;
width: 54px;
border-width: 50px 18px 0;
border-style: solid;
border-color: #232323 transparent;}#css3-pentagon:before {
content: "";
position: absolute;
height: 0;
width: 0;
top: -85px;
left: -18px;
border-width: 0 45px 35px;
border-style: solid;
border-color: transparent transparent #232323;}
CSS3 六边形
#css3-hexagon {
width: 100px;
height: 55px;
background: #232323;
position: relative;
}#css3-hexagon:before {
content: "";
position: absolute;
top: -25px;
left: 0;
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 25px solid #232323; }#css3-hexagon:after {
content: "";
position: absolute;
bottom: -25px;
left: 0;
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-top: 25px solid #232323; }
CSS3 心形
#css3-heart {
position: relative;
width: 100px;
height: 90px;
}#css3-heart:before, #css3-heart:after{
position: absolute;
content: "";
left: 50px;
top: 0;
width: 50px;
height: 80px;
background: #232323;
-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%;
}#css3-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%;
}CSS3 Gossip
#css3-gossip {
width: 96px;
height: 48px;
background: #f1f1f1;
border-color: #232323;
border-style: solid;
border-width: 2px 2px 50px 2px;
border-radius: 100%;
position: relative;
}#css3-gossip:before{
content: "";
position: absolute;
top: 50%;
left: 0;
background: #f1f1f1;
border: 18px solid #232323;
border-radius: 100%;
width: 12px;
height: 12px;
}#css3-gossip:after {
content: "";
position: absolute;
top: 50%;
left: 50%;
background: #232323;
border: 18px solid #f1f1f1;
border-radius:100%;
width: 12px;
height: 12px;
}The above is the entire content of this article. I hope it will be helpful to everyone's study. For more related content, please pay attention to the PHP Chinese website!
Related recommendations:
Use icon fonts to assist CSS in processing images
The use of CSS3 layer shadows and text shadows
The above is the detailed content of Draw basic graphics using CSS3. For more information, please follow other related articles on the PHP Chinese website!
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
How to achieve wave effect with pure CSS3? (code example)
Jun 28, 2022 pm 01:39 PM
How to achieve wave effect with pure CSS3? This article will introduce to you how to use SVG and CSS animation to create wave effects. I hope it will be helpful to you!
How to make round pictures and text in ppt
Mar 26, 2024 am 10:23 AM
First, draw a circle in PPT, then insert a text box and enter text content. Finally, set the fill and outline of the text box to None to complete the production of circular pictures and text.
How to make a round picture in ppt
Mar 25, 2024 pm 03:54 PM
How to make a circular picture in ppt: 1. Use the crop function; 2. Use the shape tool; 3. Use shortcut keys and control points to adjust.
Java program to calculate the area of a triangle using determinants
Aug 31, 2023 am 10:17 AM
Introduction The Java program for calculating the area of a triangle using determinants is a concise and efficient program that can calculate the area of a triangle given the coordinates of three vertices. This program is useful for anyone learning or working with geometry, as it demonstrates how to use basic arithmetic and algebraic calculations in Java, as well as how to use the Scanner class to read user input. The program prompts the user for the coordinates of three points of the triangle, which are then read in and used to calculate the determinant of the coordinate matrix. Use the absolute value of the determinant to ensure the area is always positive, then use a formula to calculate the area of the triangle and display it to the user. The program can be easily modified to accept input in different formats or to perform additional calculations, making it a versatile tool for geometric calculations. ranks of determinants
Use CSS skillfully to realize various strange-shaped buttons (with code)
Jul 19, 2022 am 11:28 AM
This article will show you how to use CSS to easily realize various weird-shaped buttons that appear frequently. I hope it will be helpful to you!
How to hide elements in css without taking up space
Jun 01, 2022 pm 07:15 PM
Two methods: 1. Using the display attribute, just add the "display:none;" style to the element. 2. Use the position and top attributes to set the absolute positioning of the element to hide the element. Just add the "position:absolute;top:-9999px;" style to the element.
What is the area of the circular sector?
Aug 30, 2023 am 08:33 AM
A circular sector, also known as a circular sector/sector of a circle, is a portion of a circle bounded by an arc between two radii. This area is bounded by two radii and an arc. To find the area inscribed, we need to find the angle between the two radii. The total area is equal to 360 degrees of angle. To find the area of an angle, we multiply the area by θ/360. This gives the area of the inscribed part. where θ is the angle (in degrees) between the two radii. The area of the circular sector = π*r*r*(θ/360). For example, the area of a circular sector with a radius of 5 and an angle of 60 degrees is 13.083. Area=(3.14*5*5)*(60/360)=13.03Example codeDemo#incl
How to implement lace borders in css3
Sep 16, 2022 pm 07:11 PM
In CSS, you can use the border-image attribute to achieve a lace border. The border-image attribute can use images to create borders, that is, add a background image to the border. You only need to specify the background image as a lace style; the syntax "border-image: url (image path) offsets the image border width inward. Whether outset is repeated;".
