Teach you to draw a standard circular pattern with CSS

Source: Internet
Author: User
I have shared with you a very ingenious technique for drawing triangles with pure CSS (see related articles). Over the past year, I have found that this technique of using CSS to draw triangles is very useful and efficient, especially when creating a similar page effect such as a cue box/prompt.

Another form that can be easily implemented with CSS is a circular shape. With Border-radius, you can draw a variety of beautiful round patterns.

CSS Code

Just add the Border-radius of each side of your page element to 50%, and you'll get a circle of any size:

The code is as follows:

. circle {border-radius:50%; width:200px; height:200px  ; /* Width and height need to be equal */}

This is really simple, but we can't resist the temptation to use CSS gradients and basic rotation animations:

The code is as follows:

/* Animation definition */

@keyframes Spin {from {transform:rotate (0deg),} to {transform:rotate (360deg);}} </p><p>/* rotation, gradient */#advanced {width:200px; height:200px;</p><p> background-image:- Moz-radial-gradient (45px 45px 45deg, circle cover, Yellow 0, Orange 100%, Red 95%); Background-image:-webkit-radial-grad Ient (45px 45px, circle cover, yellow, orange); Background-image:radial-gradient (45px 45px 45deg, circle cover, Yellow 0, Orange 100%, red 95%);</p><p> Anim Ation-name:spin;  animation-duration:3s; /* 3 seconds */animation-iteration-count:infinite;  Animation-timing-function:linear;}

Wow, this is the beautiful CSS circle!

The technique of using CSS to draw a circle doesn't look as useful as the CSS technique, but it still has its value in the design of the page. You can use the animated circle to show loading when the page loads ..., how to use, it depends on your creativity. Do you have a good idea?


1. CSS3 Free Video Tutorial

2. CSS3 a code tutorial to complete a box fillet effect

3. Teach you how to write a standard CSS style

4. Tutorial on using H5 and CSS3 forms validation

5. Complete code description of the gradually glowing border by CSS3 pseudo-elements

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.