css3 makes semicircular arc line

php中世界最好的语言
Release: 2018-03-21 09:55:30
Original
9576 people have browsed it

This time I will bring you CSS3 to make a semi-circular arc line. What are theprecautions for making a semi-circular arc line with CSS3? The following is a practical case, let's take a look.

This article introduces the sample code for drawing semicircular arc lines in css3 and shares it with everyone. The details are as follows:

css code

.circle1 { width: 100px; height: 200px; border: 1px solid black; border-radius: 100% 0 0 100%/50%; border-right: none; } .circle2 { width: 200px; height: 100px; border: 1px solid black; border-radius: 50% 50% 0 0/100% 100% 0 0; border-bottom: none; } .circle3 { width: 100px; height: 200px; border: 1px solid black; border-radius: 0 100% 100% 0/50%; border-left: none; } .circle4 { width: 200px; height: 100px; border: 1px solid black; border-radius: 0 0 50% 50%/0 0 100% 100% ; border-top: none; }
Copy after login
html code

Copy after login
The effect is as follows:

# I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the PHP Chinese website!

Recommended reading:

CSS3 dynamic prompt effect when the mouse moves into the picture

How to use the sticker-footer layout in css

CSS filter to achieve flame effect

The above is the detailed content of css3 makes semicircular arc line. For more information, please follow other related articles on the PHP Chinese website!

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn:Public welfare online PHP training,Help PHP learners grow quickly!