div绘制各种三角形
先来看看应用场景效果图
作用:悬浮左侧菜单栏时对该菜单进行简介
demo代码:
html:
<div class="float-flag" style="top: 15px; opacity: 0; display: none;"><div class="float-flag-shape"></div><div class="float-flag-content">服务管理</div>
</div>
css:
.float-flag{position: absolute;top: 15px;left: 65px;color: #fefefe;height: 2.5em;line-height: 2.5em;width: 6.5em;opacity: 0;background-color: #1c2b36;text-align:center;border-radius:3px;
}
.float-flag-shape{position: absolute;top: 0.5em;border: 1px solid #000;height: 0;width: 0;border-left: 4px solid rgba(0,0,0,0);border-right: 4px solid #1c2b36;border-top: 3px solid rgba(0,0,0,0);border-bottom: 3px solid #1c2b36;left:-8px;
}
.float-flag-content{margin:auto;
}
这里重点看一下float-flag-shape这个class,也就是本文要说的三角形,这部分其实是根据边距拼接成的。
我们先看下图,如果我们设置div的width,height为0,并分别对四个方向的border进行颜色设置,就不难看出border的4部分组成
css:
.float-flag-shape{ position: absolute;top: 0.5em;border: 1px solid #000;height: 0;width: 0;border-left: 50px solid #ece82b;border-right: 50px solid #03A9F4;border-top: 50px solid #25e028;border-bottom: 50px solid #f40355;
}
因此如果需要三角形的时候我们只需要隐藏任意三个边的border即可,如果对三角形的边长比例有要求的话,可以直接同时修改top,bottom 或left ,right,具体操作如下
如图上图显示的就是隐藏除了top之外的三边构成的三角形,可以对top和bottom同时调整更改其底高比例,然后通过transform进行旋转;
如图为旋转45°的样式
对于三角形的宽高调整,我们先看下图
图中四个三角形可以通过transform属性旋转达到等价的效果,因此我们用绿色三角形举例,如果要改变它的底边长度,我们可以通过调整left和right来实现,如果要调整它的高则可以通过调整bottom实现,通过不同的高,底比例可以实现锐角、直角、钝角三角形,如下图为一个小栗子
如图为调整宽高比例后的样式,短的为border-top,长的为border-right,因此这种状态下right、top和bottom则可根据需要变更,如果需要等腰三角形则top和bottom要相等,如果不需要可以不相等。试一试就能体会其中的奥秘了,很快就能上手啦
div绘制各种三角形相关推荐
- [css] CSS画一个三角形,CSS绘制空心三角形
1.不同理解的边框 <div class="border"></div> .border {width: 50px;height: 50px;border: ...
- css如何利用transparent属性设置透明度?transparent属性绘制各种三角形
想到用css设置元素透明度,大家的第一反应会是:用Opacity属性来设置透明度,其实在css中还有其他设置透明度的方法.本章给大家介绍用transparent属性设置透明度,以及用transpare ...
- 三角形css_纯 CSS 实现绘制各种三角形(各种角度)
转载至:纯 CSS 实现绘制各种三角形(各种角度) 一.前言 三角形实现原理:宽度width为0:height为0:(1)有一条横竖边(上下左右)的设置为border-方向:长度 solid red, ...
- 【OpenGL】十五、OpenGL 绘制三角形 ( 绘制 GL_TRIANGLE_FAN 三角形扇 )
文章目录 一.绘制 GL_TRIANGLE_FAN 三角形 1.绘制 3 个点的情况 2.绘制 4 个点的情况 3.绘制 5 个点的情况 4.绘制 6 个点的情况 二.相关资源 一.绘制 GL_TRI ...
- 【OpenGL】十四、OpenGL 绘制三角形 ( 绘制 GL_TRIANGLE_STRIP 三角形 | GL_TRIANGLE_STRIP 三角形绘制分析 )
文章目录 一.绘制 GL_TRIANGLE_STRIP 三角形 二.GL_TRIANGLE_STRIP 三角形绘制分析 三.相关资源 一.绘制 GL_TRIANGLE_STRIP 三角形 该模式绘制首 ...
- OpenGL 绘制彩色三角形的实例
OpenGL 绘制彩色三角形 先上图,再解答. 完整主要的源代码 源代码剖析 先上图,再解答. 完整主要的源代码 #include <sb7.h> #define INTERPOLATE_ ...
- OpenGL绘制一个三角形
OpenGL绘制一个三角形 OpenGL绘制一个三角形简介 源代码剖析 主要源代码 OpenGL绘制一个三角形简介 在本课中,我们仍然不转换坐标,因此顶点仅在正方形内可见.从 Z 的反轴看,正方形如下 ...
- OpenGL绘制Triangle三角形
OpenGL绘制Triangle三角形 前期知识准备 顶点输入 顶点着色器 编译着色器 片段着色器 着色器程序 链接顶点属性 顶点数组对象 我们一直期待的三角形 索引缓冲对象 前期知识准备 在Open ...
- Android使用NDK OpenGL ES3.0绘制一个三角形
Android使用NDK OpenGL ES3.0绘制一个三角形 [尊重原创,转载请注明出处]https://blog.csdn.net/guyuealian/article/details/820 ...
最新文章
- missing 1 required positional argument: 'on_delete'报错解决方案
- c++ DirectShow播放任意格式的视频
- 小米笔记本充电实测追求速度牺牲兼容性小米笔记本充电驱动_是海尔?也是雷神?不足1千克MixBook Air超轻薄笔记本...
- CSS 7阶层叠水平
- python的基础列表_python基础入门 列表
- Spring Boot 监听 Activemq 中的特定 topic ,并将数据通过 RabbitMq 发布出去
- 我的疫情时代——记在家的那个学期
- jvm-虚拟机栈笔记【详细】
- R以及RStudio的获取和使用
- 计算机的喇叭接口显示的英文,电脑没声音右下角小喇叭显示红X,播放设备AMDHDMIOUTPUT...
- C语言中阶第三篇:循环语句do while透析以及循环语句总结(执行次数、执行特点和循环英文的详解)
- Cobaltstrike学习(二)beacon命令
- 为什么硬盘明明还有空间,linux却说硬盘空间不足?inode;mkdir: 无法创建目录shen1: 设备上没有空间
- Codecraft-18 and Codeforces Round #458 (Div. 1 + Div. 2, combined) C. Travelling Salesman and Specia
- c语言sort函数从小到大排序指针,sort排序是从小到大
- 一个拖动鼠标写字的效果
- EasyUI的icon图标的种类
- 基于51单片机的adc0832程序编写的学习
- 计算机辅助数控编程,数控自动编程(计算机辅助编程)产生的原因,发展过程及...
- Unity Shader 案例之 镜面材质制作
热门文章
- linux 启动脚本
- XinChaCha Trust SSL Organization Validated
- 阳离子光引发剂的自由基聚合物-光引发剂1173(有机原料/醛、酮、醇、酚、醚类/醚/醌类/酮类)
- 《真心话大冒险》微电影启动 张宁江献青涩初吻_0
- 尤瓦尔·赫拉利 | 认识你自己,不要被算法操控
- 在列表中增加元素的三种方法
- 企业建站:勿让蜘蛛陷入的六个“坑”
- python3插值法
- NVDIA Jetson TX2软件介绍
- (操作系统开发)从实模式---->保护模式---->IA-32e模式( 64位模式)