CSS を使用して任意の角度の扇形形状を実装する方法 (コード例)
この記事の内容はCSSで任意の角度の扇形を実現する方法(コード例)ですので、お困りの方は参考にしていただければ幸いです。助けてください。
扇形の生産の原則は、底部に単色のプロトタイプがあり、内側に同じ色の 2 つの半円があり、これは白にすることができます。内部の半円は特定の角度で変化して扇形を生成します。形状効果
<html>
<head>
<meta charset="UTF-8">
<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;}
</st
</head>
<body> 扇形制作原理，底部一个纯色原形，里面2个相同颜色的半圆，可以是白色,内部半圆按一定角度变化，就可以产生出扇形效果 <p>/绘制一个60度扇形/</p>
<div class="shanxing shanxing1">
<div class="sx1"></div>
<div class="sx2"></div>
</div>
<p>/*绘制一个85度扇形*/</p>
<div class="shanxing shanxing2">
<div class="sx1"></div>
<div class="sx2"></div>
</div>
<p>/*绘制一个向右扇形，90度扇形*/</p>
<div class="shanxing shanxing3">
<div class="sx1"></div>
<div class="sx2"></div>
</div>
<p>/*绘制一个颜色扇形 */</p>
<div class="shanxing shanxing4">
<div class="sx1"></div>
<div class="sx2"></div>
</div>
<p>/*绘制一个不同颜色半圆夹角 */</p>
<div class="shanxing shanxing5">
<div class="sx1"></div>
<div class="sx2"></div>
</div>
</body>
</html>以下は、CSS HTML5 javascriptと組み合わせたより複雑なリンググラフィックです
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
String path = request.getContextPath(); String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/"; %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>circle</title>
<style type="text/css"> #myCanvas{} #nihao{ position: absolute; top:10px; z-index: 1;
}
</style>
</head>
<body style="background:#FBFBFB;">
<canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;"> not suopport canvas </canvas>
<div id="nihao"></div>
<script>
var text=document.getElementById("nihao");
text.innerHTML="woshiwuxinguo"; var i=0.9;//这里默认设置好评率为90%
var c=document.getElementById("myCanvas"); var ctx=c.getContext("2d");
ctx.beginPath();
ctx.lineWidth=10;
ctx.strokeStyle="gray";
ctx.arc(100,75,50,0,2*Math.PI);
ctx.fillStyle="#FBFBFB";
ctx.fill();
ctx.stroke();
ctx.beginPath();
ctx.translate(100,75);
ctx.rotate(-90*Math.PI/180);
ctx.strokeStyle="#FFCFCF";
ctx.arc(0,0,50,0,2*Math.PI*i);
ctx.stroke();
c.addEventListener("mouseover", function(e) {
ctx.beginPath();
ctx.strokeStyle="gray";
ctx.arc(0,0,50,0,2*Math.PI);
ctx.stroke(); var finish=i; var step=0; var internal=setInterval(function(e) {
console.log("step:"+step); if(step<finish){
step=step+0.01;
ctx.beginPath();
ctx.strokeStyle="#FFCFCF";
ctx.arc(0,0,50,0,2*Math.PI*step);
ctx.stroke();
}else{
clearInterval(internal);
}
}, 0.5)
}, true) </script>
</body>
</html>
以上がCSS を使用して任意の角度の扇形形状を実装する方法 (コード例)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
ホットAIツール
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Undress AI Tool
脱衣画像を無料で
Clothoff.io
AI衣類リムーバー
Video Face Swap
完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。
人気の記事
ホットツール
メモ帳++7.3.1
使いやすく無料のコードエディター
SublimeText3 中国語版
中国語版、とても使いやすい
ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境
ドリームウィーバー CS6
ビジュアル Web 開発ツール
SublimeText3 Mac版
神レベルのコード編集ソフト（SublimeText3）
ホットトピック
7724
15
1643
14
1396
52
1290
25
1233
29
Dockerコンテナの名前を確認する方法
Apr 15, 2025 pm 12:21 PM
すべてのコンテナ（Docker PS）をリストする手順に従って、Dockerコンテナ名を照会できます。コンテナリストをフィルタリングします（GREPコマンドを使用）。コンテナ名（「名前」列にあります）を取得します。
DockerによるMySQLを開始する方法
Apr 15, 2025 pm 12:09 PM
DockerでMySQLを起動するプロセスは、次の手順で構成されています。MySQLイメージをプルしてコンテナを作成および起動し、ルートユーザーパスワードを設定し、ポート検証接続をマップしてデータベースを作成し、ユーザーはすべての権限をデータベースに付与します。
MySQLの役割：Webアプリケーションのデータベース
Apr 17, 2025 am 12:23 AM
WebアプリケーションにおけるMySQLの主な役割は、データを保存および管理することです。 1.MYSQLは、ユーザー情報、製品カタログ、トランザクションレコード、その他のデータを効率的に処理します。 2。SQLクエリを介して、開発者はデータベースから情報を抽出して動的なコンテンツを生成できます。 3.MYSQLは、クライアントサーバーモデルに基づいて機能し、許容可能なクエリ速度を確保します。
Laravelは紹介例
Apr 18, 2025 pm 12:45 PM
Laravelは、Webアプリケーションを簡単に構築するためのPHPフレームワークです。次のような強力な機能を提供します。インストール：Laravel CLIを作曲家にグローバルにインストールし、プロジェクトディレクトリにアプリケーションを作成します。ルーティング：ルート/web.phpのURLとハンドラーの関係を定義します。ビュー：リソース/ビューでビューを作成して、アプリケーションのインターフェイスをレンダリングします。データベース統合：MySQLなどのデータベースとのすぐ外側の統合を提供し、移行を使用してテーブルを作成および変更します。モデルとコントローラー：モデルはデータベースエンティティを表し、コントローラーはHTTP要求を処理します。
MySQLをCentos7にインストールする方法
Apr 14, 2025 pm 08:30 PM
MySQLをエレガントにインストールするための鍵は、公式のMySQLリポジトリを追加することです。特定の手順は次のとおりです。MYSQLの公式GPGキーをダウンロードして、フィッシング攻撃を防ぎます。 mysqlリポジトリファイルを追加：rpm -uvh https://dev.mysql.com/get/mysql80-community-rease-el7-3.noarch.rpm update yumリポジトリキャッシュ：yumアップデートインストールmysql：yumインストールmysql-server startup mysql sportin
Docker用のコンテナを作成する方法
Apr 15, 2025 pm 12:18 PM
Dockerでコンテナを作成します。1。画像を引く：Docker Pull [ミラー名]2。コンテナを作成：Docker Run [Options] [Mirror Name] [コマンド]3。コンテナを起動：Docker Start [Container Name]
Dockerによってコンテナを起動する方法
Apr 15, 2025 pm 12:27 PM
Docker Containerの起動手順：コンテナ画像を引く：「Docker Pull [Mirror Name]」を実行します。コンテナの作成：「docker create [options] [mirror name] [コマンドとパラメーター]」を使用します。コンテナを起動します：「docker start [container name or id]」を実行します。コンテナのステータスを確認してください：コンテナが「Docker PS」で実行されていることを確認します。
データベース接続の解決問題：Minii/DBライブラリを使用する実用的なケース
Apr 18, 2025 am 07:09 AM
小さなアプリケーションを開発する際には、軽量データベース操作ライブラリをすばやく統合する必要性という厄介な問題に遭遇しました。複数のライブラリを試した後、私はそれらがあまりにも多くの機能を持っているか、あまり互換性がないかのどちらかであることがわかりました。最終的に、私は問題を完全に解決したYii2に基づいた単純化されたバージョンであるMinii/DBを見つけました。
