使用css绘制任意角度的扇形 |
您所在的位置：网站首页 › html圆形div › 使用css绘制任意角度的扇形 |
使用css绘制任意角度的扇形
|
开始
先说思路吧，首先要绘制出一个扇形，肯定是从一个圆中，截取出来。因此我们只需一个平行四边形，以短边为半径，画一个圆，取与平行四边形重合的部位，就是一个扇形了，如下图。 首先，其实我们只需要右上半部分，其实就是四分之一个圆，我们可以先画一个正方形div(黄色)，然后画一个2倍宽度的正方形circle(蓝色)绝对定位到右上角，然后将div的overflow设为hidden。 Title #div { margin-top: 200px; margin-left: 200px; width: 100px; height: 100px; position: relative; background: yellow; overflow: hidden; } #circle { position: absolute; right: 0; top: 0; width: 200px; height: 200px; border-radius: 50%; background: blue; overflow: hidden; }然后把div的黄色背景去了，再在circle中绝对定位一个短边和半径一样的平行四边形到右上角。为什么要在circle中定位呢，因为circle是圆弧的，使用overflow: hidden才能截断长边，形成圆弧。而div是正方形，截断不能形成扇形。 形成平行四边形的方法就要用到transform中的skew了，简单来说就是旋转x轴和y轴,使正方形拉伸为平行四边形。 Title #div { margin-top: 200px; margin-left: 200px; width: 100px; height: 100px; position: relative; overflow: hidden; } #circle { position: absolute; right: 0; top: 0; width: 200px; height: 200px; border-radius: 50%; background: blue; overflow: hidden; } #d1 { transform: skewX(135deg); transform-origin: 0 100%; position: absolute; right: 0; top: 0; background: red; width: 100px; height: 100px; }再把circle的背景色就去掉，就能只剩下红色的扇形了。 离谱的是，去看skew的时候，被transform操作中的坐标轴整晕了，得仔细研究下这个skewX，skewY，rotateX，rotateY的具体变换操作，因为平时可能使用rotate的时候也不会把XY分开了操作，试了一下，反正结果难以理解，希望还能活着走出来。 |
【本文地址】
今日新闻 |
推荐新闻 |