css画直角三角形,关于CSS画三角形的那些事
用CSS画一个三角形,是不难的问题,但我却掌握的不够熟练,例如当要求为画一个直角三角形或者等腰三角形,我就有点反应不过来。所以,在这篇中点透它,以后再见,不含糊。
原理分析
用CSS画三角形,实际上就是在一个框的四边上做文章,如果有一个div,为其设置100px的宽和高,并给其添加10px的黑色边框,这四条边形成一个闭合的正方形,那么这四条边如何分才能达到平均分配的效果呢?那只能是这样:
可以看到,每一条边单独拉出来看就是一个梯形,而用CSS画三角形其实就是从这个梯形下手,如何把这个梯形转换为一个三角形扥问题。
其实原理很简单,当div的宽和高逐渐变小的时候,其中央的留白部分逐渐变小,四条边向中央收缩,例如,当宽高都变成50px的时候,就是这个样子了:
可以想象,当宽高为0的时候,中间的空白将不可见,而边框会恰好融合成为一个黑色的矩形,而此时,每一条边就是一个三角形,当为四条边添加不同的颜色,并增大边框宽度之后,可以明晰地看出此时各边的形态:
div {
width: 0;
height: 0;
border-width: 50px;
border-style: solid;
border-color: green yellow black orange;
}
这时候就很清晰了,我们只需要使其中三条边不可见,则可见的部分就是一个三角形。为达目的,很简单,将三条边颜色设置为透明即可以。
border-color: transparent transparent black transparent;
当当当当~效果如下:
这个时候,其他三个边是存在的,只不过是透明的,那么,我们可不可以直接将其他三条边取消呢?——当然不可以,没有宽高度只有一条边,这个div还能够出现吗~
到此,最基本的三角形就简单地完成了,可以看到,三角形的高就是div的底边宽度,若要三角形更尖(斜度更大)一些,只需要加大底边的宽度即可。而底边的长度,则由两条侧边的宽度决定,两者加起来的宽度就是三角形底边的宽度,而div顶部的一条边框的宽度则只会影响三角形定点距离四条边形成矩形的顶部的距离。
明白了原理之后,想画什么三角形就很简单了。例如,一个直角三角形,如果直角边为右边和底边的话,则需要将右边框设置为0了。也就是border-right-width: 0;若要一个钝角三角形,则将左右两边的边框宽度加大即可以。当然也可以作出各个朝向的三角形了。
实现一个收藏Icon
学会了画三角形,还可以在此基础上来创造出许多形状的图形,例如下面这个常见的收藏图案:
如何在一个div中使用CSS完成这样的效果呢?通过观察,不难发现,这个icon其实是一个正方形减去一个三角形构成的,所以我们的思路就很清晰了,将下面一个三角形变成透明就可以了~
div {
width: 0;
height: 0;
border: 50px solid #ff5500;
border-bottom-color: transparent;
}
和伪元素结合实现双箭头
画一个三角形是很简单的,那么画一个像下面这样的双箭头呢?
当然,可以用两个 div 来很快实现,但是为了不增加多余的标签,可以使用伪类实现这个效果。
div,
div::after {
width: 0;
height: 0;
display: inline-block;
border: 50px;
border-style: solid;
border-color: transparent #ff5500 transparent transparent;
}
div::after {
content: "";
margin-top: -50px;
}
实现Tips气泡
同样借助伪元素,可以实现一个像下面这样的气泡。
使用伪元素来实现气泡右端的直角三角形,通过position: absolute;来将它定位。代码如下:
div {
width: 90px;
height: 40px;
border-radius: 3px;
background-color: #009bdb;
position: relative;
color: #fff;
font-size: 14px;
padding-left: 10px;
line-height: 40px;
}
div::after {
content: "";
width: 0;
height: 0;
display: inline-block;
border-style: solid;
border-width: 0 8px 8px 10px;
border-color: transparent transparent transparent #009bdb;
position: absolute;
top: 12px; left: 100px;
}
从上面的例子可以看出,运用的原理大同小异,只要灵活变通,就可以实现形态各异的图形组合。
css画直角三角形,关于CSS画三角形的那些事相关推荐
- 用 CSS 画一个带阴影的三角形
1. 思路 怎么用CSS画一个带阴影的三角形呢 ? 有童鞋说, 这还不简单吗 网上有很多解决方案, 但其实大多都是实现不太完美的, 存在一些问题 假设我们做一个向下的三角形箭头 常见的方法大致有两种 ...
- css加三角阴影,用CSS画一个带阴影的三角形的示例代码
1. 思路 怎么用CSS3画一个带阴影的三角形呢 ? 有童鞋说, 这还不简单吗 网上有很多解决方案, 但其实大多都是实现不太完美的, 存在一些问题 假设我们做一个向下的三角形箭头 常见的方法大致有两种 ...
- 【css】用css画圆,半圆和三角形
用css画圆,半圆和三角形 圆,半圆 三角形 圆,半圆 // 圆 宽高相等, border-radius大于宽度的一半 .circle{width: 100px;height: 100px;backg ...
- [css]我要用css画幅画(四)
接着之前的[css]我要用css画幅画(三), 今天,我画了两朵云,并给小明介绍了个朋友:静静. github:https://github.com/bee0060/Css-Paint , 完整代码在 ...
- [css]我要用css画幅画(七) - 哆啦A梦
接着之前的[css]我要用css画幅画(六),今天画的有所不同,画的是哆啦A梦,我们小时候对他的称呼其实是小叮当机器猫. (PS:这次我要做的事情,很多人已经做过,这并不是什么创新,我只是在学习并记录 ...
- html css画五角星,css画梯形,css画五角星, css画六角星 ,css画六边形
css画梯形,css画五角星, css画六角星 ,css画六边形 css画梯形 .triangle { border-bottom: 100px solid #F36823; border-left: ...
- 菱形实现气泡Bubble,菱形画箭头,菱形画三角形
菱形实现气泡Bubble,菱形画箭头,菱形画三角形 >>>>>>>>>>>>>>>>>>&g ...
- 如何用数学课件制作工具画直角三角形
多媒体教学环境下,需要老师们掌握教学辅助工具,比如几何画板这款课件制作工具,它作为一个强大的几何绘图工具,能够绘制许多几何图形,当然也包括直角三角形了.下面就一起来学习用几何画板画直角三角形. 目前该 ...
- css伪类(before)实现小三角形
css伪类(before)实现小三角形 效果 代码 &::before {position: absolute;top: -6px;left: 38px;content: '';border- ...
最新文章
- linux 同步 mac,WorkFlowy Beta for Mac(跨平台同步笔记工具)
- inspinia中文管理后台_Bootstrap优秀模板-INSPINIA.2.9.2
- 网站随机背景音乐源码
- 《每周一点canvas动画》——圆周运动
- 向前logistic回归与向后筛选出一样的变量_什么泊松分布?泊松回归又能做什么?...
- 我一个弱女子在欧洲大街上拉屎了,因为便秘惹的祸
- header python 环境信息_通过Python扫描代码关键字并进行预警!这样就不会出BUG了吧?...
- linux 安装tomcat
- 在线商城之购物车实现——(附完整代码)
- ElasticSearch 多字段分组求和
- 数学建模英文论文写作
- 多功能域名检测集合工具
- linux 流量蠕虫 查杀,linux系统服务器中的蠕虫病毒怎么清除
- 【初识 JQMobile 小小总结】
- Unity入门 简单的3D场景制作
- 图片加载异常兜底方案
- 服务器和PC Server介绍
- python使用百度OCR接口识别图片文字
- 《Android入门之旅》
- 2020年团体程序设计天梯赛-总决赛 L3-3 可怜的复杂度