CSS三角形绘制

html-css022

CSS三角形绘制,第1张

当div宽度为0,高度为0的时候,只设置border的大小和四边不同颜色可看到下图,只保留一边的颜色,另外三边的颜色设置为transparent可得到一个方向的三角形。因此,可延伸出设置一边的border的颜色,相邻两边的border设置为transparent可得到一个方向的三角形。

border的大小的值为三角形底边上的高,三角形的底为相邻两边的border的高的和,如下图所示的红色锐角三角形

若想实现直角三角形的效果,如下图所示直角在左上的三角形,按原理可设置上border和左border的颜色,另外两条边的颜色为transparent,此样式可简写为只设置上border的颜色,另一条相邻的右border为transparent

你也许会遇到要画个奇怪三角形的时候,只要参考锐角三角形的方式,找到三角形底边和高,计算出三角形高和把相邻两条边的高相加作为底部,你可以画出各种各样的三角形,如果再加上角度旋转的css,你便啥三角形都能画!

此类三角形解决思路通常使用两个不同颜色的三角形做颜色叠加,比如做如上图所示的边框为1px的红色边框白色底三角形,就先画一个红色三角形,再画一个尺寸少2px的白色底三角形,然后设置两个三角形的position将三角形重叠,这里使用伪元素实现

1、向上正箭头

2、向下正箭头

3、向左正箭头

4、向右正箭头

5、向左上箭头

6、向右上箭头

7、向左下箭头

8、向右下箭头

简单解释一下: CSS更像是把多个“矩形”(div)裁剪后,然后拼接成一个图案,然后给图案上色。 Canvas由点开始,延长无数个点,得到线,延长线之后得到一个面(三角形,圆形,矩形等等的图案面),然后给线或者面描边,上色。 CSS目前更像是小朋友的手工课,Canvas更像是用一支笔画图,不过画出来的图更加像能够控制大小的矢量图片。在面对曲线和更复杂图形的时候,Canvas比CSS更有办法。另外Canvas确定坐标位置的时候更加贴近常用到的数学思维方法。

第 1 选择器

第 2 RGBA和透明度

第 3 多栏布局

第 4 多背景图

第 5 Word Wrap

第 6 文字阴影

第 7 @font-face属性

第 8 圆角(边框半径)

第 9 边框图片

第 10 盒阴影

第 11 盒子大小

第 12 媒体查询

第 13 语音

扩展资料:

工作原理

CSS3原理同CSS,是在网页中自定义样式表的选择符,然后在网页中大量引用这些选择符[29]。

新增特性中transform的原理较为特殊,虽然使用位移函数translate()、缩放函数scale()、旋转函数rotate()和倾斜函数skew()可以简单地实现变形,但是变形中的矩阵函数都可以使用matrix()函数来代替。

新增特性

CSS3的新特征有很多,例如圆角效果、图形化边界、块阴影与文字阴影、使用RGBA实现透明效果、渐变效果、使用@Font-Face实现定制字体、多背景图、文字或图像的变形处理(旋转、缩放、倾斜、移动)、多栏布局、媒体查询等。

参考资料:百度百科-css3