html5怎么把一个div做成扇形 求大神指点~
答案:3 悬赏:10
解决时间 2021-03-01 21:33
- 提问者网友：离殇似水流年飞逝
- 2021-03-01 13:49
html5怎么把一个div做成扇形 求大神指点~
最佳答案
- 二级知识专家网友：气场征服一切
- 2021-03-01 14:00
<!doctype html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>效果实现</title>
<style>
*{margin: 0;padding: 0;}
div{width: 0px;height: 0px;border-radius: 50px;border:50px solid transparent;border-top-color:red;}
</style>
</head>
<body>
<div></div>
</body>
</html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>效果实现</title>
<style>
*{margin: 0;padding: 0;}
div{width: 0px;height: 0px;border-radius: 50px;border:50px solid transparent;border-top-color:red;}
</style>
</head>
<body>
<div></div>
</body>
</html>
全部回答
- 1楼网友：高冷不撩人
- 2021-03-01 15:46
我的思路是这样的：
用圆角属性做出扇形，再用一个矩形去遮挡
宽高相等画出正方形
加border-radius属性做出1/4圆或者1/2圆
矩形旋转
例如transform: rotate(45deg) 顺时针旋转45度
以上都在一个position:relative的父元素中，要旋转的矩形position:absolute
用js控制矩形旋转的角度，应该就可以了
- 2楼网友：木子香沫兮
- 2021-03-01 15:34
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>扇形</title>
<style type="text/css">
canvas{background: #A9A9A0}
</style>
</head>
<body>
<canvas id="canvas" width="800" height="600">
你的浏览器暂不支持HTML5的canvas元素
</canvas>
<script type="text/javascript">
var canvas=document.getElementById('canvas');//定义变量获取画布DOM
var c=canvas.getContext('2d');//设置绘图环境为2D;
c.lineWidth=2;
c.strokeStyle="red";
c.fillStyle="yellow";
c.arc(400,500,300,Math.PI*7/6,Math.PI*11/6,false);
c.arc(400,500,150,Math.PI*11/6,Math.PI*7/6,true);
c.closePath()
c.fill()
</script>
</body>
</html>
我要举报
如以上问答内容为低俗、色情、不良、暴力、侵权、涉及违法等信息，可以点下面链接进行举报！
大家都在看
推荐资讯