html怎么画3角型当背景,纯CSS画三角原理解析
纯CSS画三角原理解析
因为之前做一个页面出现了很多三角,开始直接用图片感觉并不是很好用,看着总是怪怪的颜色还很难调整的跟背景一样,就搜了一波代码直接用上了,事后想了一下感觉不知道具体原理是什么,很奇怪为什么边框能设置成三角的样式。于是搜了一波原理整理如下
1.边框到底是什么样的?
因为很少用到很粗的边框,而且90%的情况下我们用边框都是一个颜色的。所以我发现我并不知道边框到底是什么样子的,一直一来我都以为四条边都是一条线(不要告诉我就我一个人这样认为)。
实验了一下才发现边框越来越粗的时候,很明显每条边都是一个梯形
2.如何做出三角?
因为之前看的代码都会写上width: 0; height: 0;当时不理解为什么,现在很容易就能想到,用极限的思维,当内容大小趋近与零的时候,每个边就是一个三角了。
这个时候就可以看到三角已经出现,我们要做的就是把其他边设置为透明的就可以得到我们需要的三角了。
3.还有没有更多的情况?
通过分别取消边框发现下面几种情况:
取消一条边的时候,与这条边相邻的两条边的接触部分会变成直的
当仅有邻边时, 两个边会变成对分的三角
当保留边没有其他接触时,极限情况所有东西都会消失。
4.拓展
明白了这些之后,再看代码是不是感觉就很清晰了呢?然后我们就可以做出更多形状的三角。有了这些形状再加上旋转属性,基本所有的场景都能使用。
直角三角
.box {
/* 内部大小 */
width: 0px;
height: 0px;
/* 边框大小 只设置三条边*/
border-top: #4285f4 solid;
border-right: transparent solid;
border-left: transparent solid;
border-width: 85px;
/* 其他设置 可有可无*/
margin: 50px;
}
更小的直角三角形
利用对边的情况,做出更小的直角三角形
.box {
/* 内部大小 */
width: 0px;
height: 0px;
/* 边框大小 只设置两条边*/
border-top: #4285f4 solid;
border-right: transparent solid;
border-width: 85px;
/* 其他设置 */
margin: 50px;
}
等腰锐角三角形
通过更改底边的长度可以做出各种不同的三角形
.box {
/* 内部大小 */
width: 0px;
height: 0px;
/* 边框大小 */
border-top: #4285f4 170px solid;
border-right: transparent 85px solid;
border-left: transparent 85px solid;
/* 其他设置 */
margin: 50px;
}
对话气泡
把伪元素设置成三角,再通过定位确定位置,就可以制作出来经典的对话气泡了。
.bubbly {
position: absolute;
top: 30%;
left: 50%;
transform: translate(-50%, -50%);
background: #00ccbb;
border-radius: 8px;
width: 200px;
padding: 40px 10px;
text-align: center;
color: white;
font-size: 20px;
.bubbly:after {
content: '';
position: absolute;
bottom: 0;
left: 50%;
border: 34px solid transparent;
border-top-color: #00ccbb;
border-bottom: 0;
border-left: 0;
margin: 0 0 -34px -17px;
}
总结
通过对四条边的长度的设置,还可以做出各种各样的三角形,几乎所有三角的形状都可以设置出来。
另外还可以通过设置宽高中的一项为0另一个不为0,来设置出体形的形状,大家可以自由实验
html怎么画3角型当背景,纯CSS画三角原理解析相关推荐
- 纯CSS画的基本图形(矩形、圆形、三角形、多边形、爱心、八卦等),里面很多涉及到CSS3的一些属性。
今天在css-tricks上看到一篇文章,那篇文章让我不禁心头一震,强大的CSS啊,居然能画出这么多基本的图形.图形包括基本的矩形.圆形. 椭圆.三角形.多边形,也包括稍微复杂一点的爱心.钻石.阴阳八 ...
- 纯css画一个樱桃小丸子
纯css3画一个樱桃小小丸子,嘻嘻,废话不多少直接上代码吧! <div class="main"><div class="head">& ...
- 纯CSS画的基本图形
今天在css-tricks上看到一篇文章,那篇文章让我不禁心头一震,强大的CSS啊,居然能画出这么多基本的图形.图形包括基本的矩形.圆形. 椭圆.三角形.多边形,也包括稍微复杂一点的爱心.钻石.阴阳八 ...
- java写三角形圆矩形_纯CSS画的基本图形(矩形、圆形、三角形、多边形、爱心、八卦等)...
图形包括基本的矩形.圆形.椭圆.三角形.多边形,也包括稍微复杂一点的爱心.钻石.阴阳八卦等.当然有一些需要用到CSS3的属性,所以在你打开这篇文章的时候,我希望你用的是firefox或者chrome, ...
- 纯CSS画的基本图形(矩形、圆形、三角形、多边形、爱心、八卦等)20种类型
今天在css-tricks上看到一篇文章,那篇文章让我不禁心头一震,强大的CSS啊,居然能画出这么多基本的图形.图形包括基本的矩形.圆形.椭圆.三角形.多边形,也包括稍微复杂一点的爱心.钻石.阴阳八卦 ...
- CSS真好玩——用纯CSS画一轮新月
本篇博客依然是娱乐博客,案例搬运自 freeCodeCamp 就当代码写累时的消遣,供大家娱乐. 用CSS画一轮新月,基本的思路是用到 box-shadow这个属性,先画一个圆,在给圆添加阴影,我们的 ...
- 用纯CSS画一颗爱心
来源 | https://www.cnblogs.com/liu-en-ci/p/6721963.html CSS是一个需要深度挖掘的东西,里面有很多样式属性,掌握几个常用的便可以实现很好看的效果,例 ...
- 用纯CSS画一颗爱心,这波操作可还行?
来源 | https://www.cnblogs.com/liu-en-ci/p/6721963.html CSS是一个需要深度挖掘的东西,里面有很多样式属性,掌握几个常用的便可以实现很好看的效果,例 ...
- 用纯CSS画出蓝天白云(详细版)
在HTML5课上,老师要求我们提前学习如何用CSS画出蓝天白云并实现白云飘浮,在网上找了下,对着理解前辈们的代码消化了一下,故此记录下来. 目前,仅是实现了画出蓝天白云的效果图: 标题 HTML: & ...
最新文章
- Sql — CTE公用表表达式和With用法总结
- Win8Metro(C#)数字图像处理--2.24二值图像闭运算
- 在Ubuntu中安装及配置java
- jmeter java性能_jmeter java性能测试
- 【报告分享】2020年中国AI产业地图研究报告.pdf(附下载链接)
- knife4j--api请求参数不一致问题
- 修改Docker镜像的默认存储位置
- 长沙理工大学数据结构2013-2014学年二学期末数据结构期末考试试卷(B卷)
- 【音效素材】网络热门音效大合集,短视频必备(都是经典音效,质量不错)
- 云队友丨带不好人,就只能自己干到死
- vue ssr之nuxt
- 如何在Java中写模糊查询
- 【2022国赛模拟】逆天题——生成函数、单位根、Pollard-Rho算法
- 外贸网站到底选什么购物车网店系统最好
- 冬奥闭幕,冰雪产业将何去何从
- 【luogu P3426】SZA-Template(字符串)(KMP)
- ACT - 动作游戏
- 【Java IO流知识总结】
- 受疫情影响,超七成美国科技公司暂停招聘或裁员
- SpringCloud Hystrix超时:HystrixRuntimeException: xxx failed and no fallback available