CSS八等分圓

時間 2019-12-07

標籤 css 等分欄目 CSS 简体版

原文原文鏈接

簡介

對於CSS的練習介紹如何繪製八等分的圓。css

問題1 主要思路

這個地方的主要思路是將一個八等分的圓分紅兩部分。左邊和右邊的圓分別用半圓旋轉而得。html

1 注意：每一個半圓最後要用外面的外包矩形切一下詳見#lfet #right 2 右邊旋轉的圓順序不同後面的可能會遮擋前面的要麼順序要對，要麼使用z-indexbash

問題2 重點代碼

1 半圓和圓

.circle-left{
            width: 100px;height: 200px;
            border-radius: 0px 100px 100px 0px;
            position: absolute;
            right: 0;
            transform-origin: 0 50%;
        }
        .circle-right{
            width: 100px;height: 200px;
            border-radius:  100px 0px 0px 100px ;
            position: absolute;
            right: 0;
            transform-origin: 100% 50%;
        }
        #circle0{
            width: 200px;height: 200px;
            border-radius: 100px;background-color: yellowgreen;
            position: relative;
        }
複製代碼

上面採用的是border-radius實現圓和半圓ui

2 將半圓切整齊

#left{
            clip: rect(0px 100px 200px 0px);
            position: absolute;
            right: 0px;
            width: 100px;
            height: 200px;
            overflow: hidden;
}
複製代碼

使用clip屬性將其切整齊spa

clip只有一種值rect(a,b,c,d)code

代碼：

<!DOCTYPE html>
<html>
<head>
    <title>CSS等分圓</title>
    <meta charset="utf-8">
    <style type="text/css">
        
        .circle-left{
            width: 100px;height: 200px;
            border-radius: 0px 100px 100px 0px;
            position: absolute;
            right: 0;
            transform-origin: 0 50%;
        }
        .circle-right{
            width: 100px;height: 200px;
            border-radius:  100px 0px 0px 100px ;
            position: absolute;
            right: 0;
            transform-origin: 100% 50%;
        }
        #circle0{
            width: 200px;height: 200px;
            border-radius: 100px;background-color: yellowgreen;
            position: relative;
        }
         #circle2{
            background-color: #70f3ff;
        }
         #circle3{
            background-color: #ff461f;
            transform: rotate(45deg);
        }
        #circle4{
            background-color: #bce672;
            transform: rotate(90deg);
        }
        #circle5{
            background-color: #ffffff;
            transform: rotate(135deg);
        }
         #circle6{
            background-color: #3b2e7e;
            transform: rotate(180deg);
        }
         #circle7{
            background-color: #ff2121;
            transform: rotate(225deg);
        }
         #circle8{
            background-color: #16a951;
            transform: rotate(270deg);
        }
        #circle9{
            background-color: #e0eee8;
            transform: rotate(315deg);
        }
        #left{
            clip: rect(0px 100px 200px 0px);
            position: absolute;
            right: 0px;
            width: 100px;
            height: 200px;
            overflow: hidden;
        }
        #right{
            clip: rect(0px 100px 200px 0px);
            position: absolute;
            left: 0px;
            width: 100px;
            height: 200px;
            overflow: hidden;
        }
    </style>
</head>
<body>

    <div id="circle0">
        <div id="left">
            <div class="circle-left" id="circle2"></div>
            <div class="circle-left" id="circle3"></div>
            <div class="circle-left" id="circle4"></div>
            <div class="circle-left" id="circle5"></div>
        </div>
        <div id="right">
            <div class="circle-right" id="circle9"></div>
            <div class="circle-right" id="circle8"></div>
            <div class="circle-right" id="circle7"></div>
            <div class="circle-right" id="circle6"></div>
            
        </div>
    </div>
</body>
</html>
複製代碼

截圖

1. css圓，背景,img填滿等樣式
2. 只用html和css畫出不等分圓盤，不用canvas
3. CSS畫圓角
4. css畫半圓
5. css 圓角
6. css寫橢圓
7. CSS 三條橫線等分
8. css 實現等分佈局
9. MFC繪製萬花筒等分圓（VS2013）
10. 純CSS來畫基本的矩形、圓形、橢圓、三角形、多邊形等
更多相關文章...
• jQuery Mobile CSS 類 - jQuery Mobile 教程
• CSS 指南 - 網站建設指南
• 使用Rxjava計算圓周率
• RxJava操作符（八）Aggregate

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。