CSS如何實現任意角度的扇形（程式碼範例）-css教學-PHP中文網

首頁

web前端

css教學

CSS如何實現任意角度的扇形（程式碼範例）

不言

Nov 24, 2018 pm 02:37 PM

githubjavascriptmysqlnginxspring

這篇文章帶給大家的內容是關於CSS如何實現任意角度的扇形（程式碼範例），有一定的參考價值，有需要的朋友可以參考一下，希望對你有所幫助。

扇形製作原理，底部一個純色原形，裡面2個相同顏色的半圓，可以是白色,內部半圓按一定角度變化，就可以產生出扇形效果


    <meta>
    <title>扇形绘制</title>
    <style> 
    .shanxing{ position: relative; width: 200px; height: 200px; border-radius: 100px; background-color: yellow;
        } 
        .sx1{ position: absolute; width: 200px; height: 200px; transform: rotate(0deg); clip: rect(0px,100px,200px,0px); /*这个clip属性用来绘制半圆，在clip的rect范围内的内容显示出来，使用clip属性，元素必须是absolute的 */ border-radius: 100px; background-color: #f00;
            /*-webkit-animation: an1 2s infinite linear; */
        } 
        .sx2{ position: absolute; width: 200px; height: 200px; transform: rotate(0deg); clip: rect(0px,100px,200px,0px); border-radius: 100px; background-color: #f00;
            /*-webkit-animation: an2 2s infinite linear;*/
        }
        /*绘制一个60度扇形*/ .shanxing1 .sx1{transform: rotate(-30deg);} .shanxing1 .sx2{transform: rotate(-150deg);}

        /*绘制一个85度扇形*/ .shanxing2 .sx1{transform: rotate(-45deg);} .shanxing2 .sx2{transform: rotate(-140deg);}

        /*绘制一个向右扇形，90度扇形*/ .shanxing3 .sx1{transform: rotate(45deg);} .shanxing3 .sx2{transform: rotate(-45deg);}

        /*绘制一个颜色扇形 */ .shanxing4 .sx1{transform: rotate(45deg);background-color: #fff;} .shanxing4 .sx2{transform: rotate(-45deg);background-color: #fff;}

        /*绘制一个不同颜色半圆夹角 */ .shanxing5 .sx1{transform: rotate(45deg);background-color: #f00;} .shanxing5 .sx2{transform: rotate(-45deg);background-color: #0f0;}

<body> 扇形制作原理，底部一个纯色原形，里面2个相同颜色的半圆，可以是白色,内部半圆按一定角度变化，就可以产生出扇形效果 <p>/绘制一个60度扇形/

<div class="shanxing shanxing1">
    <div class="sx1">
     <div class="sx2">

<p>/*绘制一个85度扇形*/
<div class="shanxing shanxing2">
    <div class="sx1">
     <div class="sx2">

<p>/*绘制一个向右扇形，90度扇形*/
<div class="shanxing shanxing3">
    <div class="sx1">
     <div class="sx2">

<p>/*绘制一个颜色扇形 */
<div class="shanxing shanxing4">
    <div class="sx1">
     <div class="sx2">


<p>/*绘制一个不同颜色半圆夹角 */
<div class="shanxing shanxing5">
    <div class="sx1">
     <div class="sx2">


 
</style>

以上是CSS如何實現任意角度的扇形（程式碼範例）的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述

本文轉載於：segmentfault。如有侵權，請聯絡admin@php.cn刪除