网站建设课程报告论文,网络营销视频,学校网站报价方案,帮非法集资公司做网站违法吗#x1f3ac; 江城开朗的豌豆#xff1a;个人主页 #x1f525; 个人专栏 :《 VUE 》 《 javaScript 》 #x1f4dd; 个人网站 :《 江城开朗的豌豆#x1fadb; 》
⛺️ 生活的理想#xff0c;就是为了理想的生活 ! 目录 ⭐ 专栏简介 #x1f4d8; 文章引言
一、前… 江城开朗的豌豆个人主页 个人专栏 :《 VUE 》 《 javaScript 》 个人网站 :《 江城开朗的豌豆 》
⛺️ 生活的理想就是为了理想的生活 ! 目录 ⭐ 专栏简介 文章引言
一、前言
二、实现过程
三、原理分析
⭐ 写在最后 ⭐ 专栏简介 欢迎来到前端入门之旅这个专栏是为那些对Web开发感兴趣、刚刚开始学习前端的读者们打造的。无论你是初学者还是有一些基础的开发者我们都会在这里为你提供一个系统而又亲切的学习平台。我们以问答形式更新为大家呈现精选的前端知识点和最佳实践。通过深入浅出的解释概念并提供实际案例和练习让你逐步建立起一个扎实的基础。无论是HTML、CSS、JavaScript还是最新的前端框架和工具我们都将为你提供丰富的内容和实用技巧帮助你更好地理解并运用前端开发中的各种技术。 同时我们也会关注最新的前端趋势和发展动态。随着Web技术的不断演进前端开发也在不断推陈出新。我们会及时介绍最新的前端框架、工具和技术使你能够站在前沿与时俱进。通过掌握最新的前端技术你将能够在竞争激烈的Web开发领域中有更大的竞争力。 文章引言
一、前言
在前端开发的时候我们有时候会需要用到一个三角形的形状比如地址选择或者播放器里面播放按钮 通常情况下我们会使用图片或者svg去完成三角形效果图但如果单纯使用css如何完成一个三角形呢
实现过程似乎也并不困难通过边框就可完成
二、实现过程
在以前也讲过盒子模型默认情况下是一个矩形实现也很简单
style.border {width: 50px;height: 50px;border: 2px solid;border-color: #96ceb4 #ffeead #d9534f #ffad60;}
/style
div classborder/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;
}
⭐ 写在最后 请大家不吝赐教,在下方评论或者私信我,十分感谢. ✅ 认为我某个部分的设计过于繁琐,有更加简单或者更高逼格的封装方式 ✅ 认为我部分代码过于老旧,可以提供新的API或最新语法 ✅ 对于文章中部分内容不理解 ✅ 解答我文章中一些疑问 ✅ 认为某些交互,功能需要优化,发现BUG ✅ 想要添加新功能,对于整体的设计,外观有更好的建议 最后感谢各位的耐心观看既然都到这了点个 赞再走吧
