如何使用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 ...
最新文章
- springboot mybatis 事务_SpringBoot 下 Mybatis 的缓存
- 医学影像PACS系统解决方案与成功案例汇总
- 使用DOM动态创建标签
- 函数的参数 2018-3-27
- 苹果的倔强!今秋新iPhone外观设计将与2018年款非常相似
- 那些前端应该知道的HTTP知识
- 蒋涛:重新回归的我,将带领 CSDN 全方位升级,为 AI 转型者打造一站式平台
- [WM C++]从资源文件中加载显示png/jpg图片
- js常用方法之Array对象方法扩展
- 诺基亚智能手机知识大全
- BubbleSort C#
- eclipse Git使用教程
- 判断一个数是否为素数 java_java中如何判断一个数是否是素数(质数)
- 15款用Unity开发iOS、安卓手机游戏的必备插件
- 计算机软件工程学校排名,软件工程专业全国高校排名前十
- 2019高考数学必考知识点,高考数学知识板块
- 发布一个太空大战小游戏
- alter命令的使用
- 像素坐标系、图像坐标系、相机坐标系、世界坐标系
- 使用SQL语句对重复记录查询、统计重复次数、删除重复数据