-
2021-06-09 08:58:32
我们知道,一般网页中的箭头大多是图片图标,字体图标流行以后也有很多改用字体图标。而实际上用CSS即可绘制出各种箭头,无需裁剪图片,甚至没有用到CSS3,所以浏览器兼容性良好。
基本原理
原理非常简单,通过截取border(边框)的部分“拐角”实现,几行CSS代码即可搞定。
绘制梯形
当元素宽、高和边框的宽相近(等)时,改变某一边的颜色可以看到一个梯形,不理解?我们来看实例:
#demo11 {
border: 10px solid #000;
border-left-color: #f00;
width: 10px;
height: 10px;
}
绘制三角形
实例宽高均为10像素,当元素宽、高为0,且其他边为透明或与背景颜色相同时,就可以形一个三角形,至此小箭头已成,来看实例:
#demo12 {
border: 10px solid transparent;
border-left-color: #f00;
width: 0;
height: 0;
}
改变各个边的宽度,即通过调整“边框”厚度则可以配置出任意角度,调整显示哪一条边框则可以决定箭头方向:
#demo14 {
border: 10px solid transparent;
border-right: 20px solid #f00;
width: 0;
height: 0;
}
如果不想改变原有的DOM结构和增加新的标签,三角形还可以通过伪元素绘制出:原本内容
#demo15{
position: relative;
}
#demo15:after {
border: 10px solid transparent;
border-left: 10px solid #f00;
width: 0;
height: 0;
position: absolute;
content: ' '
}
既然用到了伪元素,那么我们就可以通过伪元素绘制出2个三角形,其中一个与背景色相同错开1个像素覆盖有颜色部分箭头,即可形成三角线,下面来看三角线分割的Tab页实例:
- 文字内容 Tab1
- 文字内容 Tab2
- 文字内容 Tab3
#demo17{
font-size: 10px;
height: 24px;
}
#demo17 li {
float: left;
position: relative;
list-style: none;
margin: 0 20px 12px -19px;
border-top: solid 1px #ddd;
border-bottom: solid 1px #ddd;
padding-left: 12px;
}
#demo17 li:after, #demo17 li:before {
border: 10px solid transparent;
border-left: 10px solid #fff;
width: 0;
height: 0;
position: absolute;
top: 0;
right: -18px;
content: ' '
}
#demo17 li:before {
border-left-color: #ddd;
right: -19px;
}
最后再介绍一种组合效果,模仿聊天对话框,使用三角形跟矩形组合成提示框:
#demo {
width: 100px;
height: 100px;
background-color: #ccc;
position: relative;
border: 4px solid #333;
}
#demo:after, #demo:before {
border: solid transparent;
content: ' ';
height: 0;
left: 100%;
position: absolute;
width: 0;
}
#demo:after {
border-width: 9px;
border-left-color: #ccc;
top: 15px;
}
#demo:before {
border-width: 14px;
border-left-color: #333;
top: 10px;
}
更多相关内容 -
Qt自定义控件的创建与初步使用(二)之图片上绘制文字、箭头、曲线
2016-07-30 18:58:57本文目的:编辑自定义控件的界面ui,并在图片上添文字、箭头、曲线、打开、保存等功能。并说明了如何去使用这个编辑好的ui界面控件! 上次简单的说明了如何去创建Qt自定义控件,当时还是对其了解不够深刻,现在看来...本文目的:编辑自定义控件的界面ui,并在图片上添文字、箭头、曲线、打开、保存等功能。并说明了如何去使用这个编辑好的ui界面控件!
上次简单的说明了如何去创建Qt自定义控件,当时还是对其了解不够深刻,现在看来,QT自定义控件就是你事先把界面写好(一般基于QWidget基类),然后再把它写入QT自定义控件的工程【可参考Qt自定义控件的创建与初步使用(一)这篇博客】中去,最后放到别的工程中,通过简单的拖拽和拷贝就可以用了。那怎么样去做和使用这个自定义的控件呢?又要注意什么呢?具体分为三大步,下面给大家娓娓道来!
配置:Qt creator5.7,Qt 5.7+VS2013(64位)(有人喜欢用后者,全凭个人爱好,我用的是creator),本篇案例的说明用的是Qt5.6(因为本人的电脑装的是Qt5.6,公司的电脑装的是Qt5.7),建议最好用Qt5.7,但实际操作中不会有太大差别。
一、建立基类是QWidget的Qt Application工程,把界面写好。
1.建立一个Qt Application工程,命名为 sof_Interface,基类是QWidget,然后一路下一步,这样你就完成了一个工程的创建(先在这个工程上把需要的界面写好)2.打开.ui界面,此处为5个功能:打开图片、保存图片、在图片上添加文字、曲线、箭头符号。拖拽5个pushbotton、1个QLabel、1个QLineEdit、1个QDialogbottonbox,并按图所示排号界面,并选中,右键点击转到槽,从而创建相关的槽函数。并添加代码。
sof_Interface.h代码
<span style="font-family:Times New Roman;font-size:14px;">#ifndef SOF_INTERFACE_H #define SOF_INTERFACE_H #include <QWidget> #include <QAbstractButton> namespace Ui { class sof_Interface; } class sof_Interface : public QWidget { Q_OBJECT public: explicit sof_Interface(QWidget *parent = 0); ~sof_Interface(); void paint(QImage&theImage); enum Type{ type1, type2, type3, }; private slots: void on_doOpen_clicked();//打开图片 void on_doSave_clicked();//保存图片 void on_buttonBox_clicked(QAbstractButton *button);//ok、cancel void on_mou_Track_clicked();//曲线 void on_arrow_Edit_clicked();//箭头 void on_text_Edit_clicked();//文字 private: Ui::sof_Interface *ui; QString curFile; //打开文件名 bool isOpen; Type path_type; //画的图形种类 QImage image,tempImage; //原图、缓存图片 QPixmap pic; //用于显示图片 bool isDrawing; QPoint begin,end; QPoint end_pos; //鼠标释放时的位置 QString Text; //存储文字变量 protected: void mousePressEvent(QMouseEvent *e); //鼠标按下事件 void mouseMoveEvent(QMouseEvent *e); //鼠标移动事件 void mouseReleaseEvent(QMouseEvent *e); //鼠标释放事 void paintEvent(QPaintEvent *); //重绘事件 }; #endif // SOF_INTERFACE_H </span>
sof_Interface.cpp中代码
<span style="font-family:Times New Roman;font-size:14px;">#include "sof_interface.h" #include "ui_sof_interface.h" #include <QFileDialog> #include <QPainter> #include <QMessageBox> #include <QMouseEvent> #include <QlineEdit> sof_Interface::sof_Interface(QWidget *parent) : QWidget(parent), ui(new Ui::sof_Interface) { ui->setupUi(this); isOpen=false; path_type=type1;//初始化 isDrawing=false;//初始化 } sof_Interface::~sof_Interface() { delete ui; } /槽函数/ void sof_Interface::on_doOpen_clicked() //打开图片槽函数 { QString fileName = QFileDialog::getOpenFileName( this, "打开图片", "", "图片格式 (*.bmp *.jpg *.jpeg *.png)"); if(fileName !=NULL) { image.load(fileName); curFile=fileName; isOpen=true; } update(); } void sof_Interface::on_doSave_clicked() //保存图片槽函数 { QString path = QFileDialog::getSaveFileName( this, tr("保存图片"), "","图片格式 (*.bmp *.jpg *.jpeg *.png)"); image.save(path); } void sof_Interface::on_buttonBox_clicked(QAbstractButton *button) //lineEdit命令行输入槽函数 { QString str; if(ui->buttonBox->button(QDialogButtonBox::Ok) == button) //判断按下的是否为"确定”按钮 { if(!ui->lineEdit->text().isEmpty()) //判断lineEdit是否为空,不为空返回0 { str += ui->lineEdit->text()+"\n"; //str连接lineEdit中的内容 Text=str; //在图片上写入lineEdit中输入的文字 str=""; } } else if(button == ui->buttonBox->button((QDialogButtonBox::Cancel))) { ui->lineEdit->clear(); } } void sof_Interface::on_mou_Track_clicked() //曲线槽函数 { path_type=type1; } void sof_Interface::on_arrow_Edit_clicked() //箭头槽函数 { path_type=type2; } void sof_Interface::on_text_Edit_clicked() //文字槽函数 { path_type=type3; } 鼠标事件 void sof_Interface::mousePressEvent(QMouseEvent *e) //鼠标按下事件 { begin=e->pos(); } void sof_Interface::mouseMoveEvent(QMouseEvent *e) //鼠标移动事件 { end=e->pos(); if(path_type==type1) //只有path_type==type1才绘制在image上(原图),这时isDrawing=false; { isDrawing=false; paint(image); } else //其他path_type全绘制在tempImage上(缓冲图上) { isDrawing=true; tempImage=image; paint(tempImage); } } void sof_Interface::mouseReleaseEvent(QMouseEvent *e) //鼠标释放事件 { end=e->pos(); isDrawing=false; paint(image); } /paintEvent事件 void sof_Interface::paintEvent(QPaintEvent *) { QPainter p(this); if(isDrawing) p.drawImage(0,0,tempImage); else p.drawImage(0,0,image); if(isOpen=true) //打开图片操作 { pic=QPixmap::fromImage(image); QPainter painter(this); painter.drawPixmap(0,0,748,480,pic); } } 每个画图的函数 void sof_Interface::paint(QImage &theImage) { QPainter pp(&theImage); pp.setCompositionMode(QPainter::CompositionMode_SourceIn); //设置画刷的组合模式CompositionMode_SourceOut这个模式为目标图像在上。 pp.setPen(QPen(QBrush(Qt::red), 2, Qt::SolidLine)); //设置画笔(颜色,线宽,样式(实线)) pp.setRenderHint(QPainter::Antialiasing, true); //设置线段反锯齿 QFont font = pp.font(); //设置字体 font.setPixelSize(20); //改变字体大小 font.setBold(false); //字体是否加粗 pp.setFont(font); //设置字体 if(path_type==type1) //曲线 { pp.drawLine(begin,end); begin=end; } if(path_type==type2) //箭头 { float x1 = begin.x(); //取points[0]起点的x float y1 = begin.y(); //取points[0]起点的y float x2 = end.x(); //取points[count-1]终点的x float y2 = end.y(); //取points[count-1]终点的y float l = 10.0; //箭头的长度 float a = 0.5; //箭头与线段角度 float x3 = x2 - l * cos(atan2((y2 - y1) , (x2 - x1)) - a);//计算箭头的终点(x3,y3) float y3 = y2 - l * sin(atan2((y2 - y1) , (x2 - x1)) - a); float x4 = x2 - l * sin(atan2((x2 - x1) , (y2 - y1)) - a);//计算箭头的终点(x4,y4) float y4 = y2 - l * cos(atan2((x2 - x1) , (y2 - y1)) - a); pp.drawLine(x2,y2,x3,y3); //绘制箭头(x2,y2,x3,y3) pp.drawLine(x2,y2,x4,y4); //绘制箭头(x2,y2,x4,y4) pp.drawLine(begin,end); //绘制主干箭头(begin,end) } if(path_type==type3) //文字 { pp.drawText(begin.x(),begin.y(),Text); } update(); } </span>
main.pp中代码
<span style="font-family:Times New Roman;font-size:14px;">#include "sof_interface.h" #include <QApplication> int main(int argc, char *argv[]) { QApplication a(argc, argv); sof_Interface w; w.show(); return a.exec(); }</span>
3.界面运行效果,还可以保存哦,注意图片格式只能加载.jpg.jpeg.png.bmp,需要扩展的自己在代码中添加吧!当然还可以更改界面背景色等,自己去改哦~这只是个demo。
二、将自己第一步写的sof_Interface工程.h和.cpp的代码拷贝到自定义控件工程的.h和.cpp中即可写成自定义控件工程了,注意代码不能完全粘贴复制哦,注意自己建立工程的类名,除非你和我的一样。然后编译后见一下.dll和.lib,并放到相应的designer中,具体可参考【Qt自定义控件的创建与初步使用(一)这篇博客】。
三、这样你再新建立任意一个工程,你都可以在Qt creator或Qt 设计师中找到自己建立的控件,然后拖拽到工程的ui界面中,最后拷贝自定义控件.h和.cpp到这个新工程的工程目录下,注意和第二大步不一样哦~,就可以编译运行啦。再次就不给效果图啦~
-
带箭头的提示框样式
2020-06-20 15:03:46做提示框的箭头时可以用以下方法: HTML: <span class="form-error">输入错误!<s class="dec1">◆</s><s class="dec2">◆</s></span> CSS: .form-error{ position: ...做提示框的箭头时可以用以下方法:
HTML:
<span class="form-error">输入错误!<s class="dec1">◆</s><s class="dec2">◆</s></span>
CSS:
.form-error{ position: absolute; right: 0; top: -35px; padding: 0px 5px 0px 10px; border: 1px solid #E2E2E2; background: #FFFFFF; color: #ff721a; line-height:24px; z-index: 999; display: none; } .form-error s{ font-family: simsun; font-size: 16px; height: 19px; right: 10px; line-height: 21px; position: absolute; text-decoration: none; top: 15px; width: 17px; } .form-error s.dec1{ color: #E2E2E2; } .form-error s.dec2{ color: #fff; top: 14px; }
思路:
s标签中是两个菱形符号,通过对菱形颜色值设定和绝对位置的定位来实现箭头。其他位置的箭头调整定位位置即可。
如果文字前需要加图标,可以在form-error里增加背景图片,也可以在文字前加img标签,再调整位置即可。
-
Bootstrap 教程 - 提示冒泡(Tooltip)
2021-06-13 10:41:05提示冒泡(Tooltip)使用CSS3为CSS和JavaScript添加自定义Bootstrap工具提示的文档和示例,用于本地标题存储的动画和数据属性。概览使用提示冒泡持件时应了解以下:Tooltip提示冒泡组件依赖于 Popper.js ,你必须将...提示冒泡(Tooltip)
使用CSS3为CSS和JavaScript添加自定义Bootstrap工具提示的文档和示例,用于本地标题存储的动画和数据属性。
概览
使用提示冒泡持件时应了解以下:Tooltip提示冒泡组件依赖于 Popper.js ,你必须将popper.min.js 文件放在 bootstrap.js之前调用,或者使用 bootstrap.bundle.min.js / bootstrap.bundle.js这两个已经包含了 Popper.js 的脚本。
如果自行编译JS,请 包含 util.js文件。
出于性能安排,Tooltip提示冒泡是一个可选插件,所以 你必须自己初始化它们。
标题(或内容)零长度情况下,Tooltip提示冒泡插件不会显示(生效)。
指定 container: 'body' 以避免复杂组年(如输入框组、按钮组等)中渲染呈出混乱(出问题)。
在隐藏元素上触发Tooltip提示冒泡插件不会起作用(无效行为)。
Tooltip提示冒泡插件的.disabled 或 disabled 元素必须放在外层(父层)元素上。
如果从一个跨多行的链接上触发Tooltip提示冒泡插件,提示冒泡将居中,在你的上使用white-space: nowrap; 可避免这种行为(即回归左右对齐)。
必须先隐藏Tooltip提示冒泡插件,然后才能从DOM中删除相应的元素。
此组件的动画效果取决于prefers-reduced-motion 媒体查询. 请参阅我们的 辅助功能文档的简化动作部分.
都明白了?很好。让我们来通过一些例子来看它们具体是如何运作的。
示例:在任何地方启用tooltip提示冒泡插件
在网页上初始化所有的tooltip提示冒泡插件一个途径就是用data-toggle 来选择它们:$(function(){
$('[data-toggle="tooltip"]').tooltip()
})
实际范例
请用鼠标点击下面一段文字上的链接,查看tooltip提示冒泡效果:
将鼠标悬停在下面的按钮上,可以看到四个工具提示方向:顶部、右侧、底部和左侧。
Tooltip on top
Tooltip on right
Tooltip on bottom
Tooltip on left
并且支持自定义HTML:
Tooltip with HTML
用法
tooltip提示冒泡插件根据需要生成内容和标记,默认情况下我们将它放在触发元素之后。
使用JavaScript触发提示冒泡:$('#example').tooltip(options)
溢出自动和滚动
当父容器溢出时,工具提示位置会尝试自动更改:自动或 溢出, 像我们的.table-responsive一样滚动,但仍保留原始位置的定位. 要解决此问题, 请将boundary选项设置为默认值, 'scrollParent',例如'window':$('#example').tooltip({boundary:'window'})
标记
工具提示框所需要的标记只是一个data 元素和你希望拥有一个tooltip提示冒泡HTML元素上的 title ,tooltip提示冒泡插件的标记很简单,尽管它需要一个位置(默认是 top 顶部指示)。
使tooltip提示冒泡使用于键盘和辅助技术使用者
推荐你只为传统的键盘和互动式(如链接或表单控制元件)的HTML元素添加tooltip提示冒泡框,虽然任意的HTML 元素 (如 )可以通过添加 tabindex="0" 属性来调整focus行为,但这会为键盘使用者的非互动式元素增加可能困惑(混乱/错误)的定位点。此外大多数辅助技术目前还没有加入这种情况下的提示冒泡效果支持。
Hover over me
-
Adobe XD —你不知道的30条提示和技巧!
2020-12-20 17:07:41这是我个人最喜欢的提示和技巧列表,可让您利用XD的潜力。Adobe Comp中的样机您可以使用适用于iOS和Android的Adobe Comp移动应用程序创建简单的模型和线框。优点是可以使用手指或手写笔进行快速直观的原型制作,... -
C# Winform label自定义大小与居中,文字自动换行,背景透明和导入图片
2020-12-20 15:28:35在 Winform 中,默认情况下,label 是根据文本自动调整大小的,不能自由设置其宽度和高度,不管怎么修改其宽度与高度,它都会变回原来的值。难道 label大小不能自定义,当然不是,需要先设置 label 的一个属性才可以... -
计算机应用基础(Word 2010文字处理系统操作题).docx
2020-06-14 20:15:56电大计算机应用基础(本科)机考训练题,,是期末复习重点试题及参考答案资料必考重点,大家可参考练习,提升计算机基础技能 -
Python调用百度AI制作简易OCR图片文字识别工具(完结篇)
2020-12-04 16:14:47通过tkinter相关技术实现窗口拆分,在此基础上增加图片大小调整的功能,并对前两篇进行梳理,提供程序的全部源代码,方便大家使用。完结篇【分 析】前两篇的内容基本实现了通过调用百度AI从图片上提取文字的功能。... -
使用jQuery在移动页面上添加按钮和给按钮添加图标
2021-03-15 13:43:02Jquery Mobile框架包含了一组最常用的移动应用程序所需的图标,为了减少下载的大小,Jquery Mobile包含的是的白色的图标sprite图片,并自动在图标后添加一个半透明的黑圈以确保在任何背景色下图片都能够清晰显示。... -
ToolTipster提示框插件
2019-08-13 15:43:321. 引入jQuery和Tooltipster's文件 2. 设置你的HTML 3. 激活 Tooltipster 4. 定义你的tooltips风格 5. 在HTML内使用你的tooltips 6. 使用插件 附录:参数 插件描述:Tooltipster是一个jQuery提示框插件,用于... -
制作网页所需的文字图片素材
2009-02-07 10:35:32制作网页所需要的一些图片、背景、音乐、文字等,无需让你在网上苦苦搜素,其中包含各个方面的内容 -
中职计算机应用基础office2010文字处理软件应用教材知识点整理归纳.doc
2021-11-15 10:58:27中职计算机应用基础office2010文字处理软件应用教材知识点整理归纳.doc -
详细解读文字识别工具———Tesseract-OCR
2019-12-05 11:48:20在尝试破解12306验证码的时候,提前了解了一下应对各种验证码的解决方案,这里主要是学习到了面对文字图片验证码,例如亚马逊、豆瓣等平台的登录时会遇到的情况,效果还不错。 一、工具介绍 ... -
Office使用的100个窍门和小提示
2013-07-26 10:02:25Office使用的100个窍门和小提示,可帮你更方便美观处理文档问题。 -
怎么修改固定的ppt模板中的字和图片
2020-12-20 18:18:24清除“图形”复选框可隐藏用自选图形 (自选图形:一组现成的形状,包括如矩形和圆这样的基本形状,以及各种线条和连接符、箭头总汇、流程图符号、星与旗帜和标注等。)等绘图工具创建的对象。-----------------------... -
用css制作一个三角形箭头
2015-03-11 16:34:20三角形我们经常用在列表、下拉提示、面包屑导航的位置,给用户以导向的引导作用,比如,在有下拉列表的地方,我们可以用向下的箭头,在列表的时候,我们能告诉用户每个列表项和下一个列表项的关系,当在面包屑导航... -
利用css实现网页带箭头的提示框
2013-03-02 15:19:27纯CSS无图片带箭头的DIV方框 div.container{position:absolute; top:30px; left:40px; font-size: 9pt; display:block; height:100px; width:200px; background-color:transparent; ... -
一些前端大牛都在学习的github库
2022-03-03 00:55:55前端知识比较杂,长时间的工作容易沉浸在业务当中,技术提升有限,这里发现了前端的新大陆,可以帮助小伙伴们巩固基础知识,完善自己的知识体系,欢迎点赞收藏,兄弟们,赶紧干起来吧!1.JavaSc... -
前端面试题(带文字+代码解析),我不相信你看不懂(天天更新)
2022-04-06 13:56:12前端面试题,我发现很多小伙伴都是死背面试八股,原理并不懂,遇到需要思考的题就懵了,所以,我会一道道从文字和代码解析前端的面试题,让大家理解,并且加强自己的水平,天天都会更新 -
ps报纸排版教程:ps报纸文字排版教程
2020-07-09 16:17:58本篇为大家分享ps报纸排版教程:ps报纸文字排版教程,自从丫头上了小学,这作业难度是越爱越高,这不,老师让做一期报纸,下面就是ps报纸排版教程:ps报纸文字排版教程的具体步骤,我学习了好久,也算是在闺女期盼的... -
Ocr答题辅助神器 OcrAnswerer4.x,通过百度OCR识别手机文字,支持屏幕窗口截图和ADB安卓截图,支持四十个...
2019-10-03 12:00:15最新版为v4.1版,开放一定概率的八窗口体验功能,请截图体验(多点几次图片)。更新日期:2018.12.30 最终版,去除时间限制。 工具特色: 1、鼠标划框、三种截图方式、急速截图 2、八窗口搜索、高亮匹配答案、二... -
Axure 9.0基础教程:史上最详细的元件说明,建议你认真看完(一)
2021-03-07 16:04:00元件说明摘要:元件作为Axure 9.0的基础功能,线框图的绘制与...Axure 9.0与8.0相比并没有增加新的元件,但9.0的元件却更好用,用起来更顺手,更有设计感,它的好用与顺手体现在每一个细节之中。1.2 元件详解元件... -
自定义ListView下拉刷新和上拉加载
2016-01-18 16:48:261、自定义下拉刷新和上拉加载更多 2、自定义下拉刷新时动画 3、重写onItemClick解决一个小bug -
Qt 5开发及实例(第4版)[陆文周][课件和代码]
2019-04-29 11:54:37相对于Visual C ,Qt更易于学习和开发。 2014年,我们编写了《Qt 5开发及实例》,受到市场的广泛欢迎。2015年,《Qt 5开发及实例》(第2版)推出,它以Qt 5.4为平台,增加了关于QML及Qt Quick开发的内容,继续受到... -
Tumblr拼贴「Tumblr Collage」-crx插件
2021-03-09 10:42:58:check_mark:使用右箭头键和上一个使用左箭头键放大下一个照片文章 (注意:下一个或上一个帖子可能不是物理上相邻的照片) :check_mark:点击照片的CTRL(或Mac中的命令)将在新标签中加载该照片的文章 :check_... -
最全的autojs列子,有一千六百多的脚本文件,让你在学习过程中少走点弯路
2020-05-19 19:00:42几十种类型的UI脚本,抖音、QQ、微信、陌陌、支付宝等自动化操作的脚本、还有部分协议列表,HTTP协议(POST、GET)上传下载,接码模块,百度文字识别api模块,文件操作模块:txt文本读一行删一行,等等其他例子