您现在的位置是：网站首页> 编程资料编程资料

利用css绘制三角形的方法及拓展CSS绘制三角形的实现代码(border法)纯CSS绘制三角形箭头图案技术解析Html+CSS绘制三角形图标css绘制透明三角形用CSS3绘制三角形的简单方法纯CSS绘制三角形箭头效果用CSS代码绘制三角形纯CSS绘制三角形的代码CSS中三角形的绘制与巧妙应用实例详解

2021-09-04 1003人已围观

简介相信大家在日常网站布局中，经常遇到一些三角形形状的按钮，有的人可能会想到用图片代替，其实我们利用css就可以实现，本文给大家介绍了利用css绘制三角形的方法，以及一些拓展应用，有需要的朋友们可以参考借鉴，下面来一起看看吧。

以下是常用的三角形形状

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

代码如下：

第一种方法

html代码：

复制代码

代码如下:

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，有个图案如下

应用蛮多的

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

复制代码

代码如下:

.eatFace{
width:0;
height:0;
border:30px solid red;
border-radius:50%;
border-right:30px solid transparent;
}

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

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

上一篇：利用CSS3实现平移动画效果示例代码超炫CSS3六边形菜单动画特效源码纯DOM+CSS3实现简单的小风车动画CSS3实现复选框动画特效示例代码利用CSS3实现单选框动画特效示例代码CSS3中动画属性transform、transition和animation属性的区别css3基于animation实现旋转的摩天轮动画特效源码纯CSS3炫酷3D星空动画特效源码jQuery+css3实现的大眼睛萌蛋动画特效源码CSS3 3D制作实战案例分析利用CSS3实现炫酷的飞机起飞动画

下一篇：CSS代码使纯英文数字自动换行的简单实现css控制文字自动换行的实现方法CSS控制文本超出指定宽度显示省略号和文本不换行效果的实现CSS超出文本指定宽度用省略号代替和文本不换行CSS自动换行、强制不换行、强制断行、超出显示省略号用CSS实现textArea中的placeholder换行功能CSS强制换行对齐的实现方法CSS实现连续字符换行的方法

您现在的位置是：网站首页> 编程资料编程资料

相关内容

点击排行

本栏推荐

猜你喜欢