一.三角形

https://blog.csdn.net/Szu_AKer/article/details/51755821

notice:三角的那部分可以用图片作为背景,但是容易出现杂边。所以利用css中border做出三角形状,原理是用border的形状如下:

当我们设置content的宽高为0时,可想而知会出现什么效果,如下:

然后把不保留的其他boder设置颜色为透明transparent就行了。具体代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.box{
position: relative;
padding-top: 8px;
}
.con{
width: 200px;
height: 100px;
border: 1px skyblue solid;
border-radius: 3px;
background-color: skyblue;
}
.con-ret{
border: 7px solid transparent;
border-bottom-color:skyblue;
position: absolute;
left: 10px;
top:-6px;
}
</style>
</head>
<body>
<div class="box">
<div class="con-ret"></div>
<div class="con"></div>
</div>
</body>
</html>

二. 箭头

1.右箭头

以下代码实现了两个向右的三角形

<body>
<span id="demo16">文字内容</span>
<style>
#demo16{
position: relative;
}
#demo16:after, #demo16:before {
border: 10px solid transparent;
border-left: 10px solid red;
width: 0;
height: 0;
position: absolute;
top: 0;
right: -20px;
content: ' '
} #demo16:before {
border-left-color: #fd0;
right: -31px;
}
</style>
</body>

将右边三角形左移,再把第一个三角形改为白色即可得到向右的箭头

<body>
<span id="demo16">文字内容</span>
<style>
#demo16{
position: relative;
}
#demo16:after, #demo16:before {
border: 10px solid transparent;
border-left: 10px solid #fff;
width: 0;
height: 0;
position: absolute;
top: 0;
right: -20px;
content: ' '
} #demo16:before {
border-left-color: red;
right: -21px;
}
</style>
</body>

下箭头

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>空心三角形指示箭头</title>
<style> /*第一个三角形*/
.all::before{ /*这里的伪元素用单冒号和双冒号都一样*/
content: '';
display: block;
position: absolute;
top: 14px;
left: 160px;
border-left: 8px solid transparent ;
border-right: 8px solid transparent;
border-top: 8px solid #555;
} /*第二个三角形*/
.all::after{
content: '';
display: block;
position: absolute;
top: 11.6px; /*向下偏移量是矩形边框宽度的1.4(根号2)倍,即8.4,top值为-26-(-8.4)*/
left: 160px;
border-left: 8px solid transparent;
border-right: 8px solid transparent;
border-top: 8px solid #ececec;
}
</style>
</head>
<body>
<a class="all"" href="#">全部商品分类</a>
</body>
</html>

div+css做出带三角的弹出框 和箭头的更多相关文章

  1. 四种常见的提示弹出框(success,warning,error,loading)原生JavaScript和jQuery分别实现

    原文:四种常见的提示弹出框(success,warning,error,loading)原生JavaScript和jQuery分别实现 虽然说现在官方的自带插件已经有很多了,但是有时候往往不能满足我们 ...

  2. 移动web:Tips消息弹出框

    在web开发中经常会用到像alert这样的弹出消息,每个浏览器自带的消息弹出框都不相同.为了统一外观,实现自定义的功能,动手写一个弹出框插件. 对弹出框的实现要求如下: 1. 仿照IOS系统弹出外观 ...

  3. vue--vant组件库Dialog弹出框

    安装vant UI框架: cnpm install vant –-save-dev 导入组件-在main.js里: import Vant from 'vant'; import'vant/lib/v ...

  4. 前端基础(九):SweetAlert(弹出框)

    简介 SweetAlert是一款很好用的弹出框框架 下载 点我下载 导入 博主用的是bootstrap-sweetalert,所以要依赖bootstrap,导入前先导入原生jQuery以及bootst ...

  5. fastadmin模态框(弹出框)

    用法: 在html页面新建一个按钮用来触发事件 <a href="javascript:;" class="btn btn-success btn-add &quo ...

  6. 【Android】各式各样的弹出框与对菜单键、返回键的监听

    Android自带各式各样的弹出框.弹出框也是安卓主要的组件之中的一个.同一时候安卓程序能够对菜单键.返回键的监听.但在安卓4.0之后就禁止对Home键的屏蔽与监听,强制保留为系统守护按键.假设非要对 ...

  7. div非弹出框半透明遮罩实现全屏幕遮盖css实现

    IE浏览器下设置元素css背景为透明: background-color: rgb(0, 0, 0); filter: alpha(opacity=20); 非IE浏览器下设置元素css背景为透明: ...

  8. css超简单实现div页面居中【适合做弹出框】

    1.前言 现在项目中用到弹出框的话大部分都是直接用控件的.不过有控件虽方便,但有时候会有冲突的地方.我上次用layui的弹出框控件,然后也用到了百度的编辑器uEditor,然后一切都好好的,结果编辑赋 ...

  9. datePiker弹出框被其他div遮挡

    最近在做项目的时候,datePiker弹出框被下面的div给遮挡住了,以前也碰到过这样类似的问题,之前直接在style中添加"z-index:1000".但是现在使用angular ...

随机推荐

  1. 大数据笔记(十七)——Pig的安装及环境配置、数据模型

    一.Pig简介和Pig的安装配置 1.最早是由Yahoo开发,后来给了Apache 2.支持语言:PigLatin 类似SQL 3.翻译器 PigLatin ---> MapReduce(Spa ...

  2. 北风设计模式课程---依赖倒置原则(Dependency Inversion Principle)

    北风设计模式课程---依赖倒置原则(Dependency Inversion Principle) 一.总结 一句话总结: 面向对象技术的根基:依赖倒置原则(Dependency Inversion ...

  3. seq使用

    转载! 用于产生从某个数到另外一个数之间的所有整数例一:# seq 1 10结果是1 2 3 4 5 6 7 8 9 10例二:#!/bin/bashfor i in `seq 1 10`;doech ...

  4. Gym 100507H - Pair: normal and paranormal

    题目链接:http://codeforces.com/gym/100507/attachments -------------------------------------------------- ...

  5. int 和 字节 相互转换

    In [10]: n = 0xf1f2 In [11]: bin(n) Out[11]: '0b1111000111110010' In [12]: n.bit_length() Out[12]: 1 ...

  6. winform最小化及添加右键

    private void PrintService_SizeChanged(object sender, EventArgs e) { if (this.WindowState == FormWind ...

  7. Ubuntu中几个字符小玩意儿

    1.黑客帝国特效: 打开终端,输入 sudo apt install cmatrix 即可.安装完成后,在终端输入 cmatrix 即可出现特效. 2.奔跑的小火车: 终端输入:sudo apt in ...

  8. python进行数据库迁移的时候显示(TypeError: __init__() missing 1 required positional argument: 'on_delete')

    进行数据库迁移的时候,显示  TypeError: __init__() missing 1 required positional argument: 'on_delete' 图示: 出现原因: 在 ...

  9. 04 bbed修复system文件头损坏

    04 bbed修复system文件头损坏 1 启动数据库,查看trace,在mount到open, SQL> startup mount; ORACLE instance started. To ...

  10. Creat-React-Native-App 之StackNavigator之踩坑记录

    Creat-React-Native-App简称CRNA. 在我开始入门RN时fb已经推出和Expo联合开发用于快速创建React Native应用的工具: Create-React-Native-A ...