zccst
- 浏览: 3322854 次
- 性别:
- 来自: 北京
-
文章分类
- 全部博客 (567)
- Web前端-html/表单 (19)
- Web前端-CSS (24)
- Web前端-CSS框架 (4)
- Web前端-JS语言核心 (50)
- Web前端-JS客户端 (26)
- nodejs生态+grunt (10)
- seajs和requirejs (9)
- backbone等框架 (7)
- 模板基础 (7)
- Web前端-deps(不改动) (6)
- Web前端-component (10)
- Web前端-jquery-plugin (13)
- 浏览器兼容性 (6)
- Web前端-使用jQuery (25)
- Web前端-使用jqueryui (6)
- Web前端-性能优化 (3)
- Web协议-HTTP (6)
- ExtJS (13)
- PHP (22)
- PHP面向对象 (4)
- PHP扩展-SOAP (6)
- PHP扩展-curl (4)
- PHP与HTML(导出) (5)
- PHP扩展-综合 (7)
- mysql基础应用 (18)
- 技术心情 (18)
- 算法和面试题 (17)
- 工具（开发）使用 (36)
- memcached原理 (2)
- session和cookie (4)
- UML (2)
- Web前端_FusionCharts (5)
- Web前端_Flex (4)
- Web前端_JSP (3)
- JavaSE (10)
- JavaEE (4)
- tomcat (2)
- Servlet开发 (3)
- Spring开发 (1)
- REST相关 (2)
- 大访问量、高并发 (2)
- 网络编程 (1)
- YII (21)
- linux命令和内核 (12)
- yii与数据库 (10)
- yii与表单 (12)
- yii view层 (1)
- perl (7)
- yii扩展 (7)
- shell (4)
- photoshop (7)
- 视觉设计 (2)
- 我关注的名人在路上 (4)
- 1-自学能力 (1)
- 2-人际沟通能力 (3)
- 3-职业规划能力 (7)
- 4-项目管理能力 (2)
- python (3)
- django (4)
- Mysql高级应用 (6)
- prototype.js (4)
- Web系统安全 (1)
- Web前端-mobile (2)
- egret (6)
- jQuery源码分析 (5)
- fis (4)
最新评论
-
yzq21056563：
感谢作者分享~请教下，http://www.lisa33xia ...
CSS基础：text-overflow:ellipsis溢出文本 -
u012206458：
$.ajax的error,complete,success方法 -
DEMONU：
谢谢，虽然不能给你赞助，但是要给你顶
mysql中key 、primary key 、unique key 与index区别 -
njupt_tolmes：
阿凡达阿凡达阿凡达阿凡达阿凡达阿凡达阿凡达阿凡达阿凡达阿滕庆亚 ...
CSS基础：text-overflow:ellipsis溢出文本 -
zenmshuo：
用过SpreadJS，也包含数据可视化的图表
推荐几个web中常用js图表插件
作者：zccst
2015-3-18
除了常规的三角形外，还可以画出更复杂的三角箭头，倾斜箭头。但是前提是必须是单一背景色，没法做到透明。如果想让该箭头在任何场景，还需要使用png图片。
参考：张鑫旭博客
图形包括基本的矩形、圆形、椭圆、三角形、多边形，也包括稍微复杂一点的爱心、钻石、阴阳八卦等。当然有一些需要用到CSS3的属性，所以在你打开这篇文章的时候，我希望你用的是firefox或者chrome，当然IE也能看一部分的。那好，下面就一起来看看我们是如何用纯CSS来画这些图形的，如果你也觉得很震撼，推荐给你的朋友吧。
转载地址：http://www.itivy.com/ivy/archive/2012/1/16/css-shape.html
2015-3-18
除了常规的三角形外，还可以画出更复杂的三角箭头，倾斜箭头。但是前提是必须是单一背景色，没法做到透明。如果想让该箭头在任何场景，还需要使用png图片。
参考：张鑫旭博客
图形包括基本的矩形、圆形、椭圆、三角形、多边形，也包括稍微复杂一点的爱心、钻石、阴阳八卦等。当然有一些需要用到CSS3的属性，所以在你打开这篇文章的时候，我希望你用的是firefox或者chrome，当然IE也能看一部分的。那好，下面就一起来看看我们是如何用纯CSS来画这些图形的，如果你也觉得很震撼，推荐给你的朋友吧。
转载地址：http://www.itivy.com/ivy/archive/2012/1/16/css-shape.html
分享到：
发表评论
-
静态时间轴和动态时间轴实现原理
2015-07-12 17:24 5745作者：zccst 一、静态时间轴，仅css即可 HTML结构 ... -
css3 webkit属性
2015-05-06 13:57 1547作者：zccst 见了很多web-kit打头的css属性，但 ... -
[css3特效]loading加载中
2015-03-25 15:53 3602作者：zccst 以前loading都是一张图片，显示或隐藏 ... -
display,position和float之间的关系
2015-03-17 12:18 5604作者：zccst 对‘display ... -
CSS中的几种颜色表示法，如hsla
2015-03-15 17:47 1388作者：zccst 平常相对熟悉的也就RGB色了，其他基本不清 ... -
[css3]知识点积累
2015-03-14 22:28 1258作者：zccst animation , keyframe ... -
[css3]知识点（自己总结版）
2015-03-13 20:11 1413作者：zccst CSS3是一个包含多方面的知识，主要分两大 ... -
[css3]流式布局要点
2015-03-08 13:16 3373作者：zccst 让一个div水平、垂直居中 一、流 ... -
单行溢出和多行文本溢出
2015-03-05 18:54 6804作者：zccst 一、单行溢 ... -
table表格内容过多时自动换行css
2014-12-04 20:44 8245作者：zccst 总结了一下 ... -
div+css布局总结
2014-09-04 10:48 1430作者：zccst 3，position布局 #wrap ... -
print打印网页相关
2014-06-10 10:24 820作者：zccst 1，CSS <link hr ... -
CSS基础：text-overflow:ellipsis溢出文本
2014-01-15 17:12 38058作者：zccst 2015-06-19 今 ... -
让table和table中的TD在指定区域滚动
2013-10-28 20:14 3927使用的属性如下： <div style="w ... -
div被撑大
2012-06-26 22:26 2171作者：zccst 情形二：外层div高度自适应，内部还有div ... -
常见CSS设置
2012-06-19 11:35 1174作者：zccst 1，图片与文字垂直对齐 办法一、设置块元素 ... -
自适应网页设计
2012-06-13 10:58 1152zccst转载 原地址：http:// ... -
CSS颜色代码
2012-05-17 17:02 1261作者：zccst 虽然CSS代码颜色有RGB组成，看似简单， ... -
CSS较好的网站推荐
2012-05-01 16:51 1206作者：zccst 在每一个领域都会诞生很多优秀的专业网站， ... -
background-position释义
2012-05-01 16:37 1294作者：zccst background-pos ...
相关推荐
文章提及的纯CSS绘制基本图形技巧，展示了CSS在图形绘制方面的强大能力。 首先，文章提到了绘制矩形和正方形，这两种图形是页面中最常见的元素。在CSS中，矩形可以通过设置元素的宽度（width）和高度（height）来...
这个工具允许用户创建不同形状的印章，如椭圆形、圆形、三角形以及矩形。以下是对这个项目的一些详细知识点的解释： 1. **C#基础**： C#是一种面向对象的编程语言，由微软公司开发，主要用于.NET框架。它支持类、...
僵尸宝宝的头像可能包含圆形或椭圆形来表示头部，矩形或梯形来构建身体，以及多边形如三角形或五边形来制作手脚。CSS3提供了`border-radius`属性来创建圆角，`clip-path`或`mask`来定义复杂的形状。开发者可以通过...
值得注意的是，CSS画图并非只能局限于三角形和五角星，实际上，你可以用CSS绘制几乎任何复杂的图形，如圆形、椭圆、多边形甚至是自定义的矢量图形。关键在于理解CSS的边框、背景、定位、伪元素和transform属性的灵活...
本文将深入探讨如何使用HTML5 Canvas来绘制三角形、矩形以及更复杂的多边形。 首先，我们需要了解Canvas的核心组件，即CanvasRenderingContext2D对象。这个对象提供了各种属性和方法，用于控制在Canvas元素上绘制的...
首先，我们来探讨CSS如何构建基本的几何图形。CSS通过设置`border-radius`、`transform`、`background-color`等属性来创建各种形状。以下是一些常见的CSS几何图形及其制作方法： 1. **正方形和矩形**：最基础的形状...
首先，CSS3的`border-radius`属性允许我们创建圆形或椭圆形。通过设置不同边角的半径，我们可以创建出正圆、椭圆甚至不规则形状。例如，`border-radius: 50%`将使一个方形元素变为完美的圆形。 其次，`transform`...
在本项目中，“ellipse-mounted-loci-p5js”是一个基于Web的交互式应用程序，它利用JavaScript编程语言和p5.js库来可视化椭圆上特定类型的三角形的轨迹。p5.js是一个开源创意编程库，它简化了在浏览器中创建视觉艺术...
实现直线、曲线、椭圆（圆）、矩形（圆角矩形）、三角形（直角三角形、等边三角形、任意三角形）、多边形的绘制。 绘制过程中，可以选择颜色，选择颜色有两种方式：颜色选择、颜色拾取。可以进行颜色填充，即对选定...
例如，一个简单的三角形可以通过旋转一个矩形的边角来实现。 再者，过渡和动画（animations）让图标在状态之间平滑地转换。这不仅限于颜色变化，还可以包括尺寸调整、位置移动等。这为网页添加了动态元素，提高了...
2. 实现直线、曲线、椭圆（圆）、矩形（圆角矩形）、三角形（直角三角形、等边三角形、任意三角形）、多边形的绘制。3. 绘制过程中，可以选择颜色，选择颜色有两种方式：颜色选择、颜色拾取。可以进行颜色填充，即对...
SVG图像由一系列几何形状构成，包括矩形、圆形、椭圆、线条、多边形和路径等。这些形状可以通过SVG的XML语法来定义。下面我们将逐一详细介绍这些基本形状。 1. 矩形（rect）： SVG中的矩形可以通过`<rect>`元素创建...
它允许开发者创建各种复杂的形状，如圆形、椭圆、多边形等，为网页设计添加独特的视觉效果。尽管`clip-path`在所有主流浏览器中还没有得到全面支持，但它在Webkit浏览器中已经可以使用，并且通过添加前缀 `-webkit-`...
在SVG中，我们可以使用多种形状元素来构建小狗和狐狸的轮廓，如`<circle>`（圆形）、`<rect>`（矩形）、`<path>`（路径）等。例如，小狗的头部可能由一个大的圆形和两个小的椭圆组成，狐狸的耳朵则可以用两个三角形...
通过深入理解边框属性和CSS布局原理，你可以创造出更多复杂的形状，甚至可以构建出更抽象的图案，如多边形、圆形、椭圆等，而无需依赖图像处理工具。这是一项实用且有趣的技能，值得每个前端开发者学习和掌握。
在CSS中，`clip-path`属性是一个非常强大的工具，它允许开发者通过定义形状来裁剪元素的可见区域，从而创造出各种独特的视觉效果。这个属性可以用于网页设计中的图像、按钮、背景等元素，以实现非传统形状的布局。在...
CSS3提供了多种方法来创建几何形状，如使用border-radius属性创建圆形或椭圆，使用polygon函数绘制多边形等。在这个特效中，爱心通常由两个相互交错的三角形组成，这可以通过巧妙地利用伪元素（如`:before`和`:after...
"scss-shapes"是一个专门为SCSS编写的库，提供了一系列的mixin（混合）来帮助开发者创建各种形状，如圆形、矩形、多边形等，极大地提高了样式设计的效率和灵活性。 在SCSS中，mixin是一个可以包含样式规则的代码块...