<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>css 圆形、扇形</title> <style> /*参考:http://www.360doc.com/content/19/0403/13/63018409_826158109.shtml 知识点: 1.本文通过一个圆形(底色),两个半圆的旋转、背景色设置,构造的各种角度的扇形。*/ * { margin: 0; padding: 0; } .circle { width: 80px; height: 80px; background: #999999; border-radius: 50%; } .sector90 { width: 80px; height: 80px; background: #999999; border-radius: 80px 0 0 0; } .shanxing { position: relative; width: 200px; height: 200px; border-radius: 100px; background: yellow; } .sx1, .sx2 { position: absolute; width: 200px; height: 200px; transform: rotate(0deg); clip: rect(0px, 100px, 200px, 0px); /*这个clip 属性用来绘制半圆,在 clip 的rect范围内的内容显示出来*/ border-radius: 100px; background: #f00; text-align: left; line-height: 100px; text-indent: 32px; } /*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: #fff; } .shanxing4 .sx2 { transform: rotate(-45deg); background: #fff; } /*不同颜色半圆夹角*/ .shanxing5 .sx1 { transform: rotate(45deg); background: #f00; } .shanxing5 .sx2 { transform: rotate(-45deg); background: #0f0; } </style> </head> <body> <p>圆形:</p> <div class="circle"></div> <p>90度扇形:</p> <div class="sector90"></div> <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>90度颜色扇形:</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 圆形、扇形.html
最新推荐文章于 2022-11-24 15:42:58 发布