css实现圆,半圆,四分之一圆和其他几何图形画法
2016-04-05 15:44
726 查看
画四分之一圆的时候,是画出一个圆并且结合overflow等实现,但是其实可以直接画出半圆或者四分之一圆,之前忽略了几个属性。
圆的画法:先画相应矩形,在用border-radius
1.画出圆
2.画出方向四个不同的本圆
3.画出四分之一个圆方法:
4.椭圆
5.沿横轴、纵轴劈开的半椭圆
6.四分之一椭圆
7.菱形
如果想让形状变形,但是里边的字体不变形
思路:
变形之后,再让里边内容旋转回来
8.三角形
9.一些属性的说明
border-radius:50px 0 0 0
等价于将border-raduis属性分成四个属性来设置,把一个圆分成上左,上右,下右,下左4份
border-top-left-radius:
border-top-right-radius:
border-bottom-right-radius:
border-bottom-left-radius:
首选需要了解border-radius
border-radius可以是元素也可是百分比。
border-radius:border-top-left-radius,border-top-right-radius,
border-bottom-right-radius,border-bottom-left-radius;
不仅仅可以为四个角分别设置值,甚至可以给每个角提供水平和垂直半径
方法是在斜杠前指定 1~4 个值,在斜杠后指定另外 1~4 个值
举例来说,
当 border-radius 的值为10px / 5px 20px 时,
其效果相当于 10px 10px 10px 10px / 5px 20px 5px 20px 。
圆的画法:先画相应矩形,在用border-radius
1.画出圆
{ width:100px; height:100px; border-radius:50px; }
2.画出方向四个不同的本圆
.top { width: 100px; height: 50px; border-radius: 50px 50px 0 0; } .right { height: 100px; width: 50px; border-radius: 0 50px 50px 0; } .bottom { width: 100px; height: 50px; border-radius: 0 0 50px 50px; } .left { width: 50px; height: 100px; border-radius: 50px 0 0 50px; }
3.画出四分之一个圆方法:
{ width:50px; height:50px; border-radius:50px 0 0 0; }
4.椭圆
<div class="ellipse"> </div> .ellipse{ width: 200px; height: 100px; border-radius: 50%; background: black; }
5.沿横轴、纵轴劈开的半椭圆
<div class="x-ellipse"> </div> <div class="y-ellipse"> </div> .x-ellipse{ width: 200px; height: 150px; border-radius: 50%/ 100% 100% 0 0; /*相当于50% 50% 50% 50%/ 100% 100% 0 0;*/ background: black; } .y-ellipse{ width: 200px; height: 150px; border-radius: 100% 0 0 100%/50%; background: black; }
6.四分之一椭圆
<div class="quarter-ellipse"> </div> .quarter-ellipse{ width: 200px; height: 150px; border-radius: 100% 0 0 0; background: black; }
7.菱形
如果想让形状变形,但是里边的字体不变形
思路:
变形之后,再让里边内容旋转回来
<div class="paralle"><p>transform:skew()</p></div> .paralle { position: relative; left: 100px; width:200px; height: 100px; background:#44a5fc; line-height: 100px; text-align: center; font-weight: bolder; transform: skew(-20deg); } .paralle p{ transform: skew(20deg); }
8.三角形
#triangle-up { width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-bottom: 100px solid lightblue; } #triangle-down { width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-top: 100px solid lightblue; } #triangle-left { width: 0; height: 0; border-top: 50px solid transparent; border-right: 100px solid lightblue; border-bottom: 50px solid transparent; } #triangle-right { width: 0; height: 0; border-top: 50px solid transparent; border-left: 100px solid lightblue; border-bottom: 50px solid transparent; } #triangle-topleft { width: 0; height: 0; border-top: 100px solid lightblue; border-right: 100px solid transparent; } #triangle-topright { width: 0; height: 0; border-top: 100px solid lightblue; border-left: 100px solid transparent; } #triangle-bottomleft { width: 0; height: 0; border-bottom: 100px solid lightblue; border-right: 100px solid transparent; } #triangle-bottomright { width: 0; height: 0; border-bottom: 100px solid lightblue; border-left: 100px solid transparent; }
9.一些属性的说明
border-radius:50px 0 0 0
等价于将border-raduis属性分成四个属性来设置,把一个圆分成上左,上右,下右,下左4份
border-top-left-radius:
border-top-right-radius:
border-bottom-right-radius:
border-bottom-left-radius:
首选需要了解border-radius
border-radius可以是元素也可是百分比。
border-radius:border-top-left-radius,border-top-right-radius,
border-bottom-right-radius,border-bottom-left-radius;
不仅仅可以为四个角分别设置值,甚至可以给每个角提供水平和垂直半径
方法是在斜杠前指定 1~4 个值,在斜杠后指定另外 1~4 个值
举例来说,
当 border-radius 的值为10px / 5px 20px 时,
其效果相当于 10px 10px 10px 10px / 5px 20px 5px 20px 。
相关文章推荐
- CSS元素的width和水平margin的设置
- 妙味课堂——HTML+CSS(第四课)(一)
- CSS3 background-size 属性值:cover
- CSS样式大全
- 有用好看的CSS+JS+table 导航
- CSS学习笔记(一)
- CSS
- css3 transition 实例及分析 图片hover出现文字 sidebar平滑过渡(动画系列3)
- css设置元素宽高比
- 怎样用JS来添加CSS样式
- CSS-硬件加速
- css各种水平垂直居中
- CSS学习(四)——边框与边界
- RadioButton样式自定义
- 滚动list 样式
- 页面布局学习(三)
- HTML&CSS
- css3 border-radius 总结
- 给表格式按钮边框点击变色--css制作表格式按钮(2)
- 关于CSS样式表的基础知识