手机
当前位置:查字典教程网 >网页设计 > Div+Css教程 >利用css绘制三角形的方法及拓展
利用css绘制三角形的方法及拓展
摘要:以下是常用的三角形形状其实都是html+css就能实现,很简单代码如下:第一种方法html代码:css代码/*向上*/.top_triang...

以下是常用的三角形形状

1

其实都是html+css就能实现,很简单

代码如下:

第一种方法

html代码:

<>

<div></div>

<>

<div></div>

<>

<div></div>

<>

<div></div>

css代码

/*向上*/

.top_triangle{

width:0;

height:0;

border-bottom:30px solid green;

border-right:30px solid transparent;

border-left:30px solid transparent;

}

/*向下*/

.bottom_triangle{

width:0;

height:0;

border-top:30px solid black;

border-right:30px solid transparent;

border-left:30px solid transparent;

}

/*向右*/

.left_triangle{

width:0;

height:0;

border-top:30px solid transparent;

border-left:30px solid yellow;

border-bottom:30px solid transparent;

}

/*向左*/

.right_triangle{

width:0;

height:0;

border-top:30px solid transparent;

border-right:30px solid red;

border-bottom:30px solid transparent;

}

第二种方法

以上代码便是实现上下左右方向三角形的代码;然而其实不难发现,其实它们之间有个共同点,都是由border中的top、right、bottom、left实现的,因此我们还有一种写法,通过实现设置一个div的border,让其隐藏掉,再给其中一个方向颜色,该方向的三角形就能显现出来,比如实现向上方向的三角形的css代码:

.top_triangle{

width:0;

height:0;

//将其先隐藏掉,再显示。

border:30px solid transparent;

border-bottom:30px solid green;

}

其它方向的就相类似,就不一一举例了。

一点tips

如果认真尝试敲过这个代码的读者或许会发现,以第一种方法的例子比方,都给border设置了三个方向的值,好奇的人会想,只设置两个行或者一个行吗?敲敲就知道啦~

实践中告诉我,设置一个或者两个但设置相反方向上的border值的都不会显示出来,可以试试;但是如果两个中,不同方向上的两个值是会显示出来的,至于是什么形状,就看你选的方向了。实践出真知!

实现的基本理解(方便记)

图片中最左方的正方形css代码如下:

.all_triangle{

width:0;

height:0;

border-top:30px solid black;

border-left:30px solid yellow;

border-right:30px solid red;

border-bottom:30px solid green;

}

加上在代码中出现最多的transparent(我理解隐藏掉),就不难理解,其实也就是将一个盒模型中的padding+content,用width+height都设置为零干掉,然后给让border隆重登场,设置相应的值,当然这些值都是必须的,然后呢,将要显现出来的显示,该隐藏的就隐藏,第一种方法中干脆就省略了一个(也只能是一个),至于大小颜色位置就随你设置了 。

延伸

css3中的border-radius,有个图案如下

利用css绘制三角形的方法及拓展1

应用蛮多的

其实这个的实现用border也行。代码如下:

.eatFace{

width:0;

height:0;

border:30px solid red;

border-radius:50%;

border-right:30px solid transparent;

}</p> <p>

至于原理,如果大家读懂了三角形的,这个不难理解。

总结

以上就是利用css绘制三角形的方法及拓展的全部内容了,希望本文的内容能对大家学习或者使用css有所帮助,如果有疑问大家可以留言交流,谢谢大家对查字典教程网的支持。

【利用css绘制三角形的方法及拓展】相关文章:

利用纯CSS创建一个三角形

彻底清除浏览器js和css缓存的方法

实现div垂直居中的display:table-cell方法示例介绍

利用css控制网页的左右排列

css实现鼠标滑过改变文字(中文变英文)

用CSS巧控制段落缩进的方法

如何利用CSS3制作3D文字效果

CSS基础教程:Class以及ID选择器

用CSS的float属性创建三栏布局网页的方法

用css实现文字的自动隐藏

精品推荐
分类导航