css——三角形的实现

不知道实现三角形有多少种方法。以下是我所知道的。新手入门，第一次写博客。

三角形，一个重要的角色扮演是transparent值，它身后撑着的巨大boss是border。

不会怎么解释，直接上代码跟效果图。

     /*等边三角形*/.equilateral_triangle{width: 0px;height: 0px;border-left: 50px solid transparent;border-right: 50px solid transparent;border-bottom: 100px solid black;}

再把透明部分去掉（右），上色，对比

嗯，接下来再看看三角形是从怎样根源的根源变化来的

     .square{width:0;height:0;border:50px solid;border-color:red green blue yellow;}

效果图

由此通过设置transparent就可以演变出各式各样的三角形，举其中两个例子。

注意到一点，就是通过设置左右、上下的比例实现不同类型的三角形。

比如，第一个例子，left、right都是bottom的一半，而没设置top值，显示出来的是正三角形，如果top取代bottom，将是倒三角形，其他向左向右一样的道理就不在赘述。

第二个例子，left、right、top、bottom值都一样，每个是正方形的一半，用数学语言描述，底是高的两倍。

在第一个例子上再给它加上一个跟bottom值一样的top，结果如图：

从三角形的实例中加深对border的理解，不，应该说认识。

还是从例子看border四边的分配效果。图是元素加了width跟height。可以看出，border的值是每个梯形的高（YY的描述），底的长度是由相邻元素撑开的。有意思的是相邻元素的分割是对角线的，因此三角形的形成也是利用了border这一特征吧。

不知道怎么理解三角形这种实现方法，只能通过实现的效果去看了。

css——三角形的实现相关推荐

html li 怎么合并,HTML—CSS-case（合并boder / 滑动门 / 去除li边框 /css三角形原理）...
1.实现多个div盒子横排列,鼠标点上去后显示border,相连的border合并. :利用position:relative的层级比标准流高(后来居上原则),与margin-left:-1px: 若 ...
CSS三角形如何工作？
本文翻译自:How do CSS triangles work? There're plenty of different CSS shapes over at CSS Tricks - Shapes ...
六、pink老师学习笔记——CSS三角形之美 margin负值之美文字围绕浮动元素行内块元素布局的巧妙运用
7. 拓展@ 7.1 margin负值之美 1). 负边距+定位:水平垂直居中咱们前面讲过, 一个绝对定位的盒子, 利用父级盒子的 50%, 然后往左(上) 走自己宽度的一半 ,可以实现盒子水 ...
前端读者 | CSS三角形和饼图
@羯瑞三角形 .triangle{width:0;height:0;border-width:50px;border-style:solid;border-color:red blue green ...
前端怎么画三角形_WEB前端-CSS三角形绘制方法
我们的网页因为 CSS 而呈现千变万化的风格.这一看似简单的样式语言在使用中非常灵活,只要你发挥创意就能实现很多比人想象不到的效果.特别是随着 CSS3 的广泛使用,更多新奇的 CSS 作品涌现出来. ...
【夯实基础--CSS】=＞高级技巧（雪碧图/滑动门/CSS三角形/字体图标(iconfont)等）
CSS高级技巧 CSS用户界面样式所谓的界面样式, 就是更改一些用户操作样式, 比如更改用户的鼠标样式, 表单轮廓等.但是比如滚动条的样式改动受到了很多浏览器的抵制,因此我们就放弃了. 防止表单域 ...
CSS第六天-高级技巧（元素隐藏、精灵图、CSS用户界面样式、margi负值作用、CSS三角形）
ps 今天这是html和css初级部分的最后一份文章了,下次发的就是HTML5和CSS3的一些基础知识.越学到后面,感觉越有意思.到后面可以自己去尝试做一些比较炫酷的动画了,还是蛮期待的. CSS高级 ...
html三角形图标,纯css三角形和css三角箭头实例代码
css箭头实例demo 纯css三角形和css三角箭头,可以随意放大缩小,可以随意颜色,这要比图片实现的三角箭头或者三角形状要灵活的多. 本文的Demo和源代码已放到GitHub,如果您觉得本篇内容不 ...
css三角形增涨,CSS3实现三角形不断放大效果
一.CSS3三角形不断放大特效 11.1 图片预览 11.2 index.html代码 CSS3三角形不断放大特效 11.3 style.css代码 html { height: 100%; } bo ...
css三角形三条边全攻略
之前写过一篇文章,叫做css三角形四条边全攻略 css三角形四条边全攻略同时遇到了些问题,有些朋友问我能不能出一个三条边的攻略,毕竟现在主流的都是用三条边画三角形. 仔细想想,也对,所以今天我出一个 ...

css——三角形的实现

css——三角形的实现相关推荐

最新文章

热门文章