用纯CSS创建一个三角形
以前用过css3画过下拉菜单里文字后面的“下拉三角符号”,类似于下面这张图片文字后面三角符号的效果
下面是一个很简单的向上的三角形代码
1 2 3 4 5 6 7 |
|
再给相应的div加上对应的class,一个如下的三角形就用css画好了
当时也尝试去理解为什么三角形的代码是要这样去写,但是没有看明白。后来也就搁着不了了之了。这是之前一个偶然的机会我有接触到了这个利用css3画三角形的知识,于是就决定好好研究了一番其原理,经过一番尝试,终于搞清楚了其内部的原理,其实很简单,下面就开始说其原理。
先来看一下我们的预备知识
当我们设置一个div其width与height为100px,并且设置其四边框的宽度为100px,且分别设置其颜色后,我们可以看到如下的一张图片
此时如果设置这个div的height为0的话,其他不变,会得到下面这个图形
下面把其宽度也设置为0后,得到如下的一张图片
所以这就是我们把width,height设置为0后得到的效果,是不是出乎意料的竟然有点好看。。好了接下来看我们的正式讲解
正式讲解部分
当我们如下设置代码并赋给div相应的属性时
1 2 3 4 5 6 7 8 |
|
会得到如下的一张图
接着当不设置border-bottom,即默认其为0时,可以得到下面的图片
然后当设置其width为0时,如下图
继续设置其height为0
最后假若你把border-left,border-right设置为透明之后,就可以看到如下的三角形了
这就是设置一个基本的三角形所需要的代码,效果也看起来很直观。按着上面的步骤分析一边就可以很清楚的明白其原理。
还有假如你是想实现一个直角三角形,则最后你需要两个border边的配合使用,浏览器会自动进行一些“拉伸变换”后就可以得到一个直角三角形。
1 2 3 4 5 6 |
|
用纯CSS创建一个三角形相关推荐
- Web前端面试指导(十八):用纯CSS创建一个三角形的原理是什么?
题目点评 三角形的图标在网页设计是很常见的,属于基本常识题,只要在练习做到过这个功能都能回答出来,可以把你做过的思路描述出来就可以了,本题的难易程度为简单 转载于:https://blog.51cto ...
- [css] 用css创建一个三角形,并简述原理
[css] 用css创建一个三角形,并简述原理 width: 0;height: 0;margin: 100px auto;border-top: 50px solid transparent;bor ...
- 纯CSS实现一个三角形加圆角三角形
效果图: 代码如下(注释有大概思路): <!DOCTYPE html> <html lang="en"> <head><meta char ...
- android三角形切图软件,还在为小三角形切图?使用纯CSS写一个简单的三角形
同学们,当美工给的设计图是这样: 或者这样: 我的内心其实是拒绝的-_-:但工作还得干,大部分同学会写 .icon{width:20px;height:20px;display:block;margi ...
- 28.纯 CSS 绘制一个世界上不存在的彭罗斯三角形
28.纯 CSS 绘制一个世界上不存在的彭罗斯三角形 原文地址:https://segmentfault.com/a/1190000014946883 感想:三个平面图形旋转 HTML代码: < ...
- 如何使用纯 CSS 创建翻牌动画
下面的示例向您展示了如何使用纯 CSS 创建翻牌动画. 作者:坚果 公众号:"大前端之旅" 华为云享专家,InfoQ签约作者,阿里云专家博主,51CTO博客首席体验官,开源项目GV ...
- css空心三角形_纯CSS制作空心三角形和实心三角形及其实现原理
纯CSS制作空心三角形和实心三角形及其实现原理 在一次项目中需要使用到空心三角形,我瞬间懵逼了.查阅了一些资料加上自己的分析思考,终于是达到了效果,个人感觉制作三角形是使用频率很高的,因此记录下来,供 ...
- html按钮按下效果_【CSS小分享】纯CSS实现一个水波纹效果按钮
前言 如果大家有用过Material Design风格的UI库,那么一定对水波纹按钮很熟悉,我们这次就是使用纯CSS实现一个最简单的水波纹效果按钮,先上成品: 原理 在按钮中放置一个默认隐藏径向渐变的 ...
- html怎么让方块自动旋转,如何使用纯CSS实现一个圆环旋转错觉的动画效果(附源码)...
本篇文章给大家带来的内容是关于如何使用纯CSS实现一个圆环旋转错觉的动画效果,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 效果预览 源代码下载 https://github.com ...
- [css] 用CSS绘制一个三角形
[css] 用CSS绘制一个三角形 .triangle{width: 0;border-bottom: 35px solid lightgreen;border-left: 35px solid tr ...
最新文章
- Android 属性动画(Property Animation) ObjectAnimator的介绍
- 计算机网络管理的常用命令,网络管理常用命令图文详解.pdf
- 腾讯开源分布式NoSQL存储系统DCache | 技术头条
- Java单元测试的意义_单元测试重要意义及方法介绍
- 由一个Quiz想到的
- php swoole实现定时任务,Swoole实现任务定时自动化调度详解,来学习下
- 跨浏览器Ajax调用封装
- java ee的小程序_Java EE调度程序
- python学习中遇到的问题
- 高级软件工程第一次作业--准备
- c# datetime._C#| DateTime.Year属性与示例
- php基础教程(二):基础语法
- TensorFlow 的简化接口Scikit Flow
- 解决Linux下路径过长一行无法显示的问题
- 思科为计算机配置ip命令,思科路由器配置IP方法
- 京东联盟PHP接口源码
- 「抖音同款播放器」上市:卡顿、黑屏和模糊,这些技术来解决
- UniPro、Bugzilla和Teambition 缺陷管理工具优劣势对比
- TokenGazer一问到底 | 第29期:研究员 vs IRISnet
- 借用百度翻译,用pyqt5 搞定pdf和word文档翻译,排版基本不变,免费好用