一.三角形

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. ionic slide组件使用

    ionic学习使用笔记 slide 组件的使用   开始做的时候,遇到了个要用ionic实现 有一系列的序列需要展示,但是当前页面上只能展示一小部分,剩余的在没有出现时是隐藏的,还得能滑动出现,但是又 ...

  2. jmeter_linux下运行

    1 先把jmeter上传到linux,解压后配置环境变量(/etc/profile) 2 把在Windows上面做好的脚本上传到linux上面(linux下运行jmeter是在jmeter的bin目录 ...

  3. 阶段1 语言基础+高级_1-3-Java语言高级_02-继承与多态_第3节 接口_1_接口概述与生活举例

  4. delphi 静态3维数组。 严重占用堆栈 切记。 应该用动态数组， 非要用静态数组的话， 要在编译器里 把 堆栈 调大

    delphi 代码正确, 但是运行就崩溃. 原因为 定义了  一些   静态3维数组. 应该扩大 软件的 堆栈 设置.    然后正常解决问题 静态3维数组.   严重占用堆栈   切记. 应该用动态 ...

  5. PHP 距离我最近排序+二维数组按指定列排序

    思路: 1.获取我的位置,即:我的经纬度 2.各站点须有位置     即:排序对象有位置经纬度 3.查询要排序的站点列表 4.循环遍历计算  与我的距离 5.二维数组按 指定列(距离)排序 具体如下: ...

  6. C++边双缩点，Redundant Paths 分离的路径

    一道比较简单的 关于边双的题,个人感觉难度不大. 求出整个图的边双,根据边双的定义我们可以延伸出 边双的任两个点都有至少两种路径来互相抵达(因为其不存在割边) .不妨将每个边双缩成一个点,样例中的图便 ...

  7. Node.js 的环境配置

    1.安装node.js 官网上面最新版本的nodejs 都是自带npm的.http://nodejs.cn/至于安装过程选择默认下载就行 2.安装淘宝镜像,也就是将国外的一些资源代理到国内. 步骤:1 ...

  8. Eureka-server配置servlet.context-path后导致Eureka-client注册到server问题

    在springboot项目里配置了servlet.context-path(应用上下文路径),也称之为项目路径,该配置让项目URL后增加配置的值.如果在Eureka-server中配置该值,当然也会改 ...

  9. [Python3 练习] 003 货币转换

    题目:货币转换 (1) 描述 人民币和美元是世界上通用的两种货币,写一个程序进行货币间币值转换 记人民币和美元之间的汇率为:1 美元 = 6.78 人民币 程序可以接受人民币或美元输入,转换为另一种货 ...

  10. Error querying database. Cause: org.apache.ibatis.reflection.ReflectionException: There is no getter for property named 'ItemsCustom' in 'class com.pojo.OrderDetailCustom

    再用 junit 测试MyBatis时发现的错误: org.apache.ibatis.exceptions.PersistenceException: ### Error querying data ...