如何使用css实现三角形
一、前言
通常情况下,我们会使用图片或者svg
去完成三角形效果图,但如果单纯使用css
如何完成一个三角形呢?
实现过程似乎也并不困难,通过边框就可完成
二、实现过程
在以前也讲过盒子模型,默认情况下是一个矩形,实现也很简单
<style>.border {width: 50px;height: 50px;border: 2px solid;border-color: #96ceb4 #ffeead #d9534f #ffad60;}
</style>
<div class="border"></div>
效果如下图所示:
将border
设置50px
,效果图如下所示:
白色区域则为width
、height
,这时候只需要你将白色区域部分宽高逐渐变小,最终变为0,则变成如下图所示:
这时候就已经能够看到4个不同颜色的三角形,如果需要下方三角形,只需要将上、左、右边框设置为0就可以得到下方的红色三角形
但这种方式,虽然视觉上是实现了三角形,但实际上,隐藏的部分任然占据部分高度,需要将上方的宽度去掉
最终实现代码如下:
.border {width: 0;height: 0;border-style:solid;border-width: 0 50px 50px;border-color: transparent transparent #d9534f;
}
如果想要实现一个只有边框是空心的三角形,由于这里不能再使用border
属性,所以最直接的方法是利用伪类新建一个小一点的三角形定位上去
.border {width: 0;height: 0;border-style:solid;border-width: 0 50px 50px;border-color: transparent transparent #d9534f;position: relative;
}
.border:after{content: '';border-style:solid;border-width: 0 40px 40px;border-color: transparent transparent #96ceb4;position: absolute;top: 0;left: 0;
}
效果图如下所示:
伪类元素定位参照对象的内容区域宽高都为0,则内容区域即可以理解成中心一点,所以伪元素相对中心这点定位
将元素定位进行微调以及改变颜色,就能够完成下方效果图:
最终代码如下:
.border:after {content: '';border-style: solid;border-width: 0 40px 40px;border-color: transparent transparent #96ceb4;position: absolute;top: 6px;left: -40px;
}
三、原理分析
可以看到,边框是实现三角形的部分,边框实际上并不是一个直线,如果我们将四条边设置不同的颜色,将边框逐渐放大,可以得到每条边框都是一个梯形
当分别取消边框的时候,发现下面几种情况:
取消一条边的时候,与这条边相邻的两条边的接触部分会变成直的
当仅有邻边时, 两个边会变成对分的三角
当保留边没有其他接触时,极限情况所有东西都会消失
通过上图的变化规则,利用旋转、隐藏,以及设置内容宽高等属性,就能够实现其他类型的三角形
如设置直角三角形,如上图倒数第三行实现过程,我们就能知道整个实现原理
实现代码如下:
.box {/* 内部大小 */width: 0px;height: 0px;/* 边框大小 只设置两条边*/border-top: #4285f4 solid;border-right: transparent solid;border-width: 85px; /* 其他设置 */margin: 50px;
}
如何使用css实现三角形相关推荐
- css画横线箭头_用CSS绘制三角形箭头
用CSS绘制三角形箭头.使用纯CSS,你只需要很少的代码就可以创作出各种浏览器都兼容的三角形箭头! CSS代码:/* create an arrow that points up */ div.arr ...
- 纯 CSS 实现三角形尖角箭头的实例
为什么80%的码农都做不了架构师?>>> 上次无意中发现了个使用纯 CSS 实现三角形尖角箭头的方法 http://blog.csdn.net/zhouzme/article/ ...
- 06. 用css实现三角形
用css实现三角形 <!DOCTYPE html> <html lang="en"> <head><meta charset=" ...
- html css右下角三角形,纯CSS绘制三角形(各种角度)
CSS/HTML 的 纯CSS绘制三角形(各种角度) 我们的网页因为 CSS 而呈现千变万化的风格.这一看似简单的样式语言在使用中非常灵活,只要你发挥创意就能实现很多比人想象不到的效果.特别是随着 C ...
- css 绘制三角形_解释CSS形状:如何使用纯CSS绘制圆,三角形等
css 绘制三角形 Before we start. If you want more free content but in video format. Don't miss out on my Y ...
- html div三角形,【div】纯CSS绘制三角形
原标题:[div]纯CSS绘制三角形 我们的网页因为 CSS 而呈现千变万化的风格.这一看似简单的样式语言在使用中非常灵活,只要你发挥创意就能实现很多比人想象不到的效果.特别是随着 CSS3 的广泛使 ...
- css空心三角形_(12)把“可以动的盒子”更优雅地展示: “伪元素”妙用 | CSS...
原创:itsOli @前端一万小时 本文版权归作者所有,未经授权,请勿转载! 本文节选自"语雀"私有付费专栏「前端一万小时 | 从零基础到轻松就业」 1. 如何使用伪元素来清除浮动 ...
- html css拖拽设计,css绘制三角形 和 HTML拖拽事件
利用css制作三角形 利用设置边框的三个边的长度和border实现三角形设置,并隐藏其他边 例子:#yz3{ display: inline-block; 0; height: 0; border-t ...
- 制作京东快递查询 css制作三角形
这是我学习前端道路上制作的一个小案例,想把这些记下来,记录我的学习经历和更加熟练的掌握代码..这个案例是当我们在下面输入数字时上面的盒子会放大的显示出来,效仿的是京东快递查询单号.好了,废物不多说,上 ...
- 纯CSS实现三角形图标
纯Css实现三角形.气泡框的三角形 [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-rWU68bRK-1647095723236)(C:\Users\zwz\AppDat ...
最新文章
- Delphi 的内存操作函数(2): 给数组指针分配内存
- C#苹果应用开发——第一讲初始Xamarin
- 登录注册的基本加密方法(可逆)
- LiveVideoStackCon 2019北京开幕 成为多媒体技术生态风向标
- linux 内核 三天吐血,编译安装——吐血经验,内附脚本
- linux添加video驱动,linux下video驱动源码位置
- 【解题报告】VijosP1448校门外的树(困难版)
- 学业水平考试容易过吗_天水普通高中冬季学业水平考试圆满结束
- Kruskal/Prim/Dijkstra模板
- js实现页面加载完毕之前显示Loading效果
- 2015年4月21日---开始写自己的专业博客啦
- 数据分析09|数据转换
- 宝塔自动备份网站到FTP空间
- 戴尔启动修复无法自动修复此计算机,在 Dell 计算机上运行 Windows 启动修复
- 程序员非常实用的十个工具网站,值得收藏
- 更完美 联想乐Phone获取root权限教程
- 计算机毕业设计Java城市智能公交系统(源码+系统+mysql数据库+lw文档)
- 安装惠普打印机显示等待php,HP打印机安装过程中报错0x000006be的解决方法
- PAT A1027 Colors in Mars
- 晓说2017-定期持续更新
热门文章
- 计算机毕业设计springboot基于SpringBoot框架的民俗文化交流与交易平台的设计与实现4557w源码+系统+程序+lw文档+部署
- 00.Docker 搭建本地ChatGPT,后端优化,绕过 Cloudflare,速度喜人。
- proxmox安装linux无法上网,Proxmox安装pfSense教程
- 带有背景更新的背景差分法matlab,matlab背景差分法代码
- VUE 莹石摄像头直播视频
- 微信小程序 textarea输入框内文字,从中间删除快的时候,光标会从中间跳到最后位置
- 新浪SAE开放独立域名绑定功能
- Java基于本地MySQL连接设计图形化界面学生管理系统
- 国际短信如何更精准、更有效?
- SpringBoot项目中使用Swagger2及注解解释(详细)