css3 makes semicircular arc line-CSS Tutorial-php.cn

css3 makes semicircular arc line

php中世界最好的语言

Release： 2018-03-21 09:55:30

Original

9754 people have browsed it

This time I will bring you CSS3 to make a semi-circular arc line. What are the precautions 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

<ul>
    <li><p class="circle1"></p></li>
    <li><p class="circle2"></p></li>
    <li><p class="circle3"></p></li>
    <li><p class="circle4"></p></li>
</ul>

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!