纯CSS画三角形
大家好,又见面了,我是你们的朋友全栈君。
之前遇到过的问题如果查了然后懂了,然后没有及时复盘思考,就很容易还回去,今天把许久之前的这个知识点再整理一下,一是加深自己的记忆,二也是让初学者更容易懂。
首先,创建一个空的div
<div class="triangle"></div>
然后,CSS处理它的边框,给它不一样的颜色,好观察
.triangle{ border-left:100px solid red; border-right:100px solid black; border-top:100px solid green; border-bottom:100px solid pink; ·}
结果,运行出来是这样的
div的宽占据了整个浏览器,因为我们没有给它设置宽度高度,它的值是auto,所以就占据了整个浏览器,导致我们的上下边框特别的长。 这时,我们给它设置一下宽度
.triangle{ width:0; border-left:100px solid red; border-right:100px solid black; border-top:100px solid green; border-bottom:100px solid pink; }
结果是这样子的
这个结果我非常满意,看到这里你们应该也知道三角形怎么截取了,而且是任意方向(上下左右)的三角形。 解释一下 四个方向的border其实是有重叠部分的,在四条边框都有值的情况下,左上角的正方形就由左边框和上边框分割,以此类推,而左矩形理所应当是归属左边距,以此类推。 上面的图形,因为宽高为0,所以其实只有四个正方形在被分割,所以也才会呈现四个三角形。 为了更形象的表达,我给div加了宽高
.triangle{ width:50px; height:50px; border-left:100px solid red; border-right:100px solid black; border-top:100px solid green; border-bottom:100px solid pink; }
然后是这样子的
这样子,你们就很清楚的知道边框是怎么分割的以及它为什么会呈现这个图案,下面我手动分割@依旧不懂的同学,到这里你应该懂我说的了。
回到原来的问题,我们应该怎么得到三角形呢? 有的同学可能会以为是直接把其他三个方向的边框去掉,那你会发现,div不见了!因为任意三个方向的边框为0,都会使4个正方形都消失,只剩下一个矩形,然而我们的宽高为0,因此,就使图形消失。再来看看这个图案。
比如我们想得到向右的三角形 那么,我先去掉右边的边框总可以吧,这样子就会去掉蓝色框框内的内容
呈现这样子
再想一步,怎么才能让绿色的块和粉红色的块去掉,有同学想,我们把它们设置成背景颜色就好啦!于是就有人设置成默认的白色。
看似我们把三角形画出来,但是假如换了一个背景色,我们就要手动去换边框的颜色,这里介绍一个属性值:transparent,表示透明。 完整的CSS如下:
.triangle{ width:0px; border-left:100px solid red; border-top:100px solid transparent; border-bottom:100px solid transparent; }
CSS画三角形的介绍就到这里,大家也可以用span标签来话,但是会发现有一个纵向的高度,一开始我以为是line-height导致的,试了一下,发现是font-size导致的,所以只要把font-size设置为0就ok了,完整的CSS如下:
.triangleSpan{ font-size: 0; border-left:100px solid red; border-top:100px solid transparent; border-bottom:100px solid transparent; }
假如你们不满足于四个方向的三角形,那么可以运用CSS3的属性,随便你旋转
div{ transform:rotate(7deg); -ms-transform:rotate(7deg); /* IE 9 */ -moz-transform:rotate(7deg); /* Firefox */ -webkit-transform:rotate(7deg); /* Safari 和 Chrome */ -o-transform:rotate(7deg); /* Opera */ }
发布者:全栈程序员栈长,转载请注明出处:https://javaforall.cn/149157.html原文链接:https://javaforall.cn
相关文章
- 50道 CSS 经典面试题(包含答案)
- css 画三角形
- CSS实现实心三角形和空心三角形[通俗易懂]
- CSS画三角形及其原理
- 在html中加入外部css样式,如何引入CSS样式表?
- 使用html css实现180箭头旋转,纯CSS实现箭头旋转「建议收藏」
- 页面布局(下):引入 Tailwind CSS 框架构建博客应用 UI 界面
- 【原创】CSS基础以及常用使用方法
- css绘制三角形
- 前端必备的 CSS 库,normalize.css
- CSS专题,熟练布局技巧,需知文档流
- 【CSS】CSS 层叠样式表 ② ( CSS 引入方式 - 内嵌样式 )
- 【CSS】标签显示模式 ④ ( 标签显示模式示例 | 设置行内元素宽高 | 设置鼠标经过样式 | 设置文字水平居中 | 设置文字垂直居中 | 文本行高与盒子高度关系 )
- 【CSS】盒子模型内边距 ⑤ ( 内边距不影响盒子模型尺寸的情况 | 不设置宽度或高度为其设置 Padding 内边距时不撑开盒子 )
- 【CSS】使用 CSS 实现三角形 ( 宽高设置为 0 | 设置四个边框宽度 / 样式 / 颜色值 | 兼容低版本浏览器 | 基本示例 | 对话框示例 )
- CSS 三角形绘制方法详解编程语言
- CSS如何影响MySQL的使用(css影响MySQL)
- MySQL登陆系统CSS实现一键登录(css mysql登陆)
- 器使用Oracle CSS服务器提升业务效率(oracle css服务)
- 小心:CSS代码书写顺序不同,导致显示效果不一样
- CSS教程之css选择器、属性、值
- 如何使用jquery控制CSS样式,并且取消Css样式(如背景色,有实例)
- 使用css实现全兼容浏览器的三角形