CSS 怎么绘制不规则图形? 下面本篇文章给大家介绍一下使用 CSS 绘制不规则图形的方法. 有一定的参考价值, 有需要的朋友可以参考一下, 希望对大家有所帮助.
CSS 绘制不规则图形
在实际开发中, 经常会遇到绘制图形 (图标) 的需求, 比如: 箭头图表, 不规则图形, 规则图形;
常见方法
对于图形的实现, 可以大体上分为几种做法
(1) 背景图片, 请 UI 小姐姐帮你吧...... 此处略过;
(2) CSS3 的属性: 圆角, 透明度, 变形, 边框, 伪类等属性实现;
(3) 渐变属性: 通常使用线性渐变实现切角;
(4) 裁剪属性:
(5) Canvas 实现:
背景图实现
背景图存在的问题:
占用资源较大, 修改维护不方便, 灵活性不足;
CSS3 属性: 图形实现
大体可以划分为:
三角形系列: 三角形, 倒三角, 左三角, 右三角, 左上三角, 右上三角, 左下三角, 右下三角;
圆形系列: 圆形, 椭圆, 扇形, 圆环, 月牙, 蛋形
四边形系列: 正方形, 长方形, 菱形, 平行四边形, 梯形, 直角梯形
多边形系列: 五边形, 钻石, 六边形, 八边形,
特殊形状: 心形, 无穷大符号, 食人豆, 太极图
星形系列: 五角星, 六角星, 八角星, 十二角星
实际需求: 对话框
渐变属性
渐变分为: 径向渐变, 线性渐变;
关键是掌握三个要素:
渐变线(gradient line)
渐变线上的起始点 (starting point) 和结束点(ending point)
在起始点和结束点上的颜色值
- /* Keyword values */
- clip-path: none;
- /* Image values */
- clip-path: url(resources.svg#c1);
- /* Box values */
- clip-path: fill-box;
- clip-path: stroke-box;
- clip-path: view-box;
- clip-path: margin-box
- clip-path: border-box
- clip-path: padding-box
- clip-path: content-box
- /* Geometry values */
- clip-path: inset(100px 50px);
- clip-path: circle(50px at 0 100px);
- clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
- /* Box and geometry values combined */
- clip-path: padding-box circle(50px at 0 100px);
- /* Global values */
- clip-path: inherit;
- clip-path: initial;
- clip-path: unset;
- .el{
- shape-outside: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/123941/css-shapes-9.jpg);
- shape-image-threshold: 0.0;
- }
- .float {
- shape-outside: polygon(10px 10px, 90px 50px, 40px 50px, 90px 90px, 10px 90px);
- shape-margin: 10px;
- }
- shape-margin: 10px;
- shape-margin: 1em;
- shape-margin: 5%;
- shape-margin: calc(2em - 1px);
来源: http://www.css88.com/qa/css3/17304.html