CSS を使用して任意の角度の扇形形状を実装する方法 (コード例)-CSSチュートリアル-php.cn

ホームページ

ウェブフロントエンド

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 中国語 Web サイトの他の関連記事を参照してください。

声明

この記事はsegmentfaultで複製されています。侵害がある場合は、admin@php.cn までご連絡ください。

GitHub项目分享：10款点开就能玩的开源在线游戏Mar 24, 2023 pm 07:15 PM

本篇文章在GitHub上给大家整理总结10 款开源的在线游戏，点开就能玩的那种，大部分游戏支持手机端玩耍，简直不要太爽！

github是什么Mar 24, 2023 pm 05:46 PM

GitHub是一个面向开源及私有软件项目的托管平台，可以让开发者们在这里托管自己的代码，并进行版本控制。GitHub主打的是开源项目与协作，通过这个平台上的开源项目，开发者们可以查看其他开发者的项目源代码，并进行交流和学习。

【总结】一些可能导致GitHub不能打开的原因和解决方法Mar 27, 2023 am 11:33 AM

GitHub是一个非常受欢迎的版本控制和代码托管平台。然而，有时候我们可能会遭遇到无法访问GitHub的问题。这是因为GitHub是一个全球性的平台，受到地理位置、网络状况、网站设置等因素的影响。本文将介绍一些可能导致GitHub不能打开的原因，以及解决这些问题的方法。

聊聊github中怎么上传项目和文本文档Mar 27, 2023 am 10:53 AM

GitHub是一个基于Git的代码托管平台，被广泛用于开源社区和企业内部代码管理。在GitHub上可以上传项目和文本文档，但是它所支持的格式和上传方式略有不同。

【整理分享】7个有趣又实用的开源GitHub项目Nov 30, 2022 pm 06:18 PM

本篇文章给大家整理分享7个有趣又实用的开源项目，这些项目都已经收录到GitHub上的，希望对大家有所帮助！

github中怎么只下载一个文件夹中的内容Mar 27, 2023 am 10:53 AM

GitHub是一个流行的代码托管平台，用于开发人员协作和版本控制。作为开发人员，您可能需要从其他开发人员的GitHub存储库中只下载特定文件夹的内容。在本文中，我们将演示如何在不下载整个存储库的情况下只下载GitHub存储库中的一个文件夹。

聊聊如何删除GitHub库中的一个文件夹Mar 27, 2023 am 11:33 AM

GitHub是一个非常受欢迎的版本控制系统，它允许用户在互联网上存储和共享自己的代码库。它是程序员的必备工具之一。但是，有时候我们可能需要删除GitHub库中的一个文件夹。本篇文章将介绍如何删除GitHub库中的一个文件夹。

详解将Github项目部署到服务器上的步骤Mar 27, 2023 am 10:53 AM

Github是目前全球最大的开源社区，很多程序员都会将自己的代码托管在Github上，借助其方便的版本控制和协作功能。然而，Github上的项目仅仅是代码，要把它部署到服务器上运行，需要一些额外的工作。本文将为大家介绍具体的操作步骤。

See all articles

ホットAIツール

ホットツール

MinGW - Minimalist GNU for Windows

このプロジェクトは osdn.net/projects/mingw に移行中です。引き続きそこでフォローしていただけます。 MinGW: GNU Compiler Collection (GCC) のネイティブ Windows ポートであり、ネイティブ Windows アプリケーションを構築するための自由に配布可能なインポートライブラリとヘッダーファイルであり、C99 機能をサポートする MSVC ランタイムの拡張機能が含まれています。すべての MinGW ソフトウェアは 64 ビット Windows プラットフォームで実行できます。

Safe Exam Browser

Safe Exam Browser は、オンライン試験を安全に受験するための安全なブラウザ環境です。このソフトウェアは、あらゆるコンピュータを安全なワークステーションに変えます。あらゆるユーティリティへのアクセスを制御し、学生が無許可のリソースを使用するのを防ぎます。

SAP NetWeaver Server Adapter for Eclipse

Eclipse を SAP NetWeaver アプリケーションサーバーと統合します。

SublimeText3 英語版

推奨: Win バージョン、コードプロンプトをサポート!

mPDF

mPDF は、UTF-8 でエンコードされた HTML から PDF ファイルを生成できる PHP ライブラリです。オリジナルの作者である Ian Back は、Web サイトから「オンザフライ」で PDF ファイルを出力し、さまざまな言語を処理するために mPDF を作成しました。 HTML2FPDF などのオリジナルのスクリプトよりも遅く、Unicode フォントを使用すると生成されるファイルが大きくなりますが、CSS スタイルなどをサポートし、多くの機能強化が施されています。 RTL (アラビア語とヘブライ語) や CJK (中国語、日本語、韓国語) を含むほぼすべての言語をサポートします。ネストされたブロックレベル要素 (P、DIV など) をサポートします。