使用Less制作带箭头提示框

这里使用Less来制作带箭头的提示框,跟css比起来,方便多了,可以剩下很多的代码,别的不扯了,先看看效果吧。

这里我实现了4个方向的提示框,下面是具体实现代码:

提示框代码:

<div class="top_prompt">
        <div class="top_triangle">
            <span class="line"></span>
            <span class="back"></span>
        </div>
        <div class="prompt_border">
            上提示框<br/>
        </div>
    </div>

    <div class="left_prompt">
        <div class="top_triangle">
            <span class="line"></span>
            <span class="back"></span>
        </div>
        <div class="prompt_border">
            左提示框<br/>
        </div>
    </div>

    <div class="right_prompt">
        <div class="top_triangle">
            <span class="line"></span>
            <span class="back"></span>
        </div>
        <div class="prompt_border">
            右提示框<br/>
        </div>
    </div>

    <div class="bottom_prompt">
        <div class="top_triangle">
            <span class="line"></span>
            <span class="back"></span>
        </div>
        <div class="prompt_border">
            下提示框<br/>
        </div>
    </div>

less部分:

这里将实现提示框的代码封装到一个library.less文件中的,方面多个地方调用,其他less文件使用该文件时,直接使用@import "library";就可以引入该文件了

library.less文件代码:

//边框
.border(all,@b_w:1px,@color:#cdcdcd,@style:solid){
	border:@b_w @style @color;
}

//上边框
.border(top,@b_w:1px,@color:#cdcdcd,@style:solid){
	border-top:@b_w @style @color;
}

//右边框
.border(right,@b_w:1px,@color:#cdcdcd,@style:solid){
	border-right: @b_w @style @color;
}

//下边框
.border(bottom,@b_w:1px,@color:#cdcdcd,@style:solid){
	border-bottom:@b_w @style @color;
}

//左边框
.border(left,@b_w:1px,@style:solid,@color:#cdcdcd){
	border-left: @b_w @style @color;
}

//定位->相对定位
.position(r){
	position: relative;
}
//定位->绝对定位
.position(a){
	position: absolute;
}
//定位->固定定位
.position(f){
	position: fixed;
}

//字体
.font(@size:14px,@lh:30px,@style:normal,@family:"微软雅黑"){
	font:@style @size/@lh @family;
}

//内边距
.padd(all,@distance:10px){
	padding:@distance;
}

.padd_top_left(@top_distance:5px,@left_distance:10px){
  padding:@top_distance @left_distance;
}
//上内边距
.padd(top,@distance:10px){
	padding-top: @distance;
}
//右内边距
.padd(right,@distance:10px){
	padding-right: 10px;
}
//下内边距
.padd(bottom,@distance:10px){
	padding-bottom: @distance;
}
//左内边距
.padd(left,@distance:10px){
	padding-left: @distance;
}

//外边距
.margin(all,@distance:10px){
	margin:@distance;
}

.margin_top_left(@top_distance:5px,@left_distance:10px){
  margin:@top_distance @left_distance;
}
//上外边距
.margin(top,@distance:10px){
	margin-top:@distance;
}
//右外边距
.margin(right,@distance:10px){
	margin-right:@distance;
}
//下外边距
.margin(bottom,@distance:10px){
	margin-bottom:@distance;
}
//左外边距
.margin(left,@distance:10px){
	margin-left:@distance;
}

/**
向上的三角
top:匹配模式
@b_width:三角的宽度
@color:三角的颜色
*/
.triangle(top,@b_width:10px,@color:#cdcdcd) when(iscolor(@color)){
  border-width: @b_width;
  border-color:transparent transparent @color transparent;
  border-style:solid dashed dashed dashed;
}

/**
向右的三角
right:匹配模式
@b_width:三角的宽度
@color:三角的颜色
*/
.triangle(right,@b_width:10px,@color:#cdcdcd) when(iscolor(@color)){
  border-width: @b_width;
  border-color: transparent  transparent transparent @color;
  border-style: dashed solid dashed dashed;
}

/**
向下的三角
bottom:匹配模式
@b_width:三角的宽度
@color:三角的颜色
*/
.triangle(bottom,@b_width: 10px,@color: #cdcdcd) when(iscolor(@color)){
  border-width: @b_width;
  border-color: @color transparent transparent transparent;
  border-style: dashed dashed solid dashed;
}

/**
向左的三角
bottom:匹配模式
@b_width:三角的宽度
@color:三角的颜色
*/
.triangle(left,@b_width: 10px,@color: #cdcdcd) when(iscolor(@color)){
  border-width: @b_width;
  border-color: transparent @color transparent transparent ;
  border-style: dashed  dashed dashed solid;
}

//这里是上面的公公样式,不需要手动调用,less会自动调用
.triangle(@_,@b_width:10px,@color:#cdcdcd){
  width: 0px;
  height: 0px;
  display: inline-block;
}

//圆角
.border-radius(@raiuds:5px){
  border-radius:@raiuds;
  -webkit-border-radius: @raiuds;
  -moz-border-radius: @raiuds;
}

/*
	箭头向上的提示框
	top:匹配模式
	@pb_w:提示框的宽度
	@color:提示框边框颜色
*/
.prompt(top,@pb_w:200px,@color: #cdcdcd){
  .top_triangle{
	top:-20px;
	left:10px;
	.line{
	  .triangle(top,10px,@color);//向上的三角
	}
	.back{
	  .triangle(top,10px,#ffffff);//向上的三角
	  top:1px;
	}
  }
}

/*
	箭头向左的提示框
	left:匹配模式
	@pb_w:提示框的宽度
	@color:提示框边框颜色
*/
.prompt(left,@pb_w:200px,@color: #cdcdcd){
  .top_triangle{
	left:-20px;
	top:10px;
	.line{
	  .triangle(left,10px,@color);//向左的三角
	}
	.back{
	  .triangle(left,10px,#ffffff);//向左的三角
	  left:1px;
	}
  }
}

/*
	箭头向右的提示框
	right:匹配模式
	@pb_w:提示框的宽度
	@color:提示框边框颜色
*/
.prompt(right,@pb_w:200px,@color: #cdcdcd){
  .top_triangle{
	left:@pb_w+21;
	top:10px;
	.line{
	  .triangle(right,10px,@color);//向右的三角
	}
	.back{
	  .triangle(right,10px,#ffffff);//向右的三角
	  left:-1px;
	}
  }
}

/*
	箭头向下的提示框
	bottom:匹配模式
	@pb_w:提示框的宽度
	@color:提示框边框颜色
*/
.prompt(bottom,@pb_w:200px,@color: #cdcdcd){
  .top_triangle{
	bottom: 0px;
	left:10px;
	.line{
	  .triangle(bottom,10px,@color);//向下的三角
	}
	.back{
	  .triangle(bottom,10px,#ffffff);//向下的三角
	  top:-1px;
	}
  }
}

//提示框公共样式,不需要手动调用
.prompt(@_,@pb_w:200px,@color: #cdcdcd){
  .position(r);//相对定位
  .margin(top,5px);//上外边距
  .top_triangle{
	z-index: 1;
	.position(a);//绝对定位
	.line{
	  .position(a);//绝对定位
	}
	.back{
	  .position(a);//绝对定位
	}
  }
  .prompt_border{
	.position(r);//相对定位
	.border(all,1px,@color);//边框
	.padd_top_left();//内边距
	background: #ffffff;
	width: @pb_w;
	.border-radius();//圆角
	.font();
  }
}

使用另外一个文件调用:

@import "lib/library";
.top_prompt {
  .prompt(top);
}

.left_prompt{
  .prompt(left);
}

.right_prompt{
  .prompt(right);
}

.bottom_prompt{
  .prompt(bottom);
}

编译less成为css文件,我使用的是Koala的工具,当然这里代码要对less熟悉的人才能看懂,如果对less不熟悉,可以先去了解下less

时间: 12-20

使用Less制作带箭头提示框的相关文章

div+css制作带箭头提示框效果图(原创文章)

一直都在看站友们的作品,今天也来给大家分享一个小的效果,第一次发还有点小紧张呢,语言表达能力不是很好,还请见谅…^ 先来个简单点的吧,上效果图 刚开始在网上看到效果图的时候感觉好神奇,当我试着写出来的时候发现,哇!原来这么简单,我这脑袋瓜咋没反应过来呢,所以整理了下顺便简化了分享出来,希望对大家有帮助. <div class="demo"></div> <style>.demo{    width:0;    height:0px;    borde

利用 css 制作简单的提示框

在网页开发中,为了提高用户体验,经常会用到一些提示框来引导用户,这里分享下一些简单的提示框的制作 1.首先类似一个长方形右上角一个关闭按钮 这里用到的主要是一些定位的知识,运用relative和absolute可以快速制作这样的一个提示框,想详细了解,点击这里 html代码: <div id="position"> <div class="position-relative"> <span>提示信息</span> &l

popover带箭头弹框

我们先来看一下效果吧: 分析:这个带箭头的弹框其实是一个控制器,通过Modal方式展现,但跟传统模态方式效果不一样,我们一眼就能看出. Xib方式实现popover: 1.segue的时候选择Present As Popover 2.我们看下segue的属性: 3.重写prepareforsegue方法: 1 override func prepare(for segue: UIStoryboardSegue, sender: Any?) { 2 // 1.判断跳转控制器的类型 3 if seg

另类提示框

我这里说的提示框,就是当用户将鼠标移动到需要提示的图标时,就会在这图标的位置出现一个提示框了. 咦,那这有什么好说的呢? 如果你来实现这一效果,你会怎么做呢? 初步的做法嘛,就是利用PS制作一张提示框内容区域的png图片和一张指向位置的箭头png图片,然后利用这张图片作为提示背景,里面输入指定内容呗. 恩,想法简单粗暴,那我们就来初步实现以下吧. 首先你得有两张上述说的图片,图片制作结果如下:             图一                                  图二

UI基础——提示框

提示框的种类有很多,废话不多说,直接上代码 一.文本提示框 运行结果如下: 代码实现如下: 1 @interface ViewController () 2 // 添加方法 3 - (IBAction)add; 4 // 移除方法 5 - (IBAction)remove; 6 // 商品容器 7 @property (weak, nonatomic) IBOutlet UIView *shopsView; 8 9 @property (weak, nonatomic) IBOutlet UIB

纯CSS制作冒泡提示框

来源:http://www.ido321.com/1214.html 前两天翻译了一篇文章,关于利用css的border属性制作基本图形:http://www.ido321.com/1200.html 在此基础上.今天分享一篇文章给大家.假设利用CSS制作冒泡提示框. 先看2张效果图: CSS: /* 对话气泡 使用方法:使用.speech-bubble和.speech-bubble-DIRECTION类 <div class="speech-bubble speech-bubble-to

动态获取设置提示框和小箭头的位置

var curY;   //获取所选项的TOP值 var curH;   //获取所选项的height值 var  curW;   //获取所选项的width值 var  srtY;    //设置提示箭头的TOP值 var  srtX;    //设置提示箭头的Left值 var objL;    //获取当前对象 function setInitValue(obj){ curY=obj.offset().top; curH=obj.height(); curW=obj.width(); sr

纯CSS实现tooltip提示框,CSS箭头及形状之续篇--给整个tooltip提示框加个边框

在前面一篇中我们介绍了纯CSS实现tooltip提示框,通俗的讲也就是CSS箭头及形状 不过注意一点是,他始终是一个元素,只是通过CSS实现的,今天我们要说的是给这个“tooltip提示框”整体加一个边框,下面是是一篇完成的截图(不了解的可以看看:纯CSS实现tooltip提示框,CSS箭头及形状): 首先像:after一样我们介绍另外一个CSS中“ :before ”选择器 定义和用法:(参考w3school:before选择器) :before 选择器在被选元素的内容前面插入内容,使用 co

Android开发系列(二十三):实现带图片提示的Toast提示信息框

Android中的Toast是很常见的一个消息提示框,但是默认的消息提示框就是一行纯文本,所以我们可以为它设置一些其他的诸如是带上图片的消息提示. 实现这个很简单: 就是定义一个Layout视图,然后设置Toast显示自定义的View. 在这里,就是设置了一个LinearLayout容器,然后给这个容器添加图片,添加文字信息.然后把这个容器设置给Toast对象,让其显示出来. 首先创建一个Android项目,然后我们编辑下main.xml文件: <span style="font-size