效果图图下:

HTML代码:

<div style="background-color: transparent; border: 1px #DDDDDD solid; width: 200px; height: 100px;">
<div class="triangle">
<div class="triangle-box"></div>
</div>
</div>

CSS代码:
.triangle{/* 三角形图片位置 */
background-image: url(img/traintop.png);
width: 20px;
height: 20px;
background-position: center;
position: relative;
top: -14px;/* 只需修改这里就可以了 */
left: 74px;
background-size: 100%;
float: left;
}
.triangle-box{/* 隐藏底部可修改 */
background-color: white;
width: 14px;
height: 1px;
float: left;
top: 13px;
left: 3px;
z-index: 0;
position: relative;
}

 

css自定义会话框的更多相关文章

  1. Fidder详解-工具简介(保存会话、decode解码、Repaly、自定义会话框、隐藏会话、会话排序)

    前言 本文会对Fidder这款工具的一些重要功能,进行详细讲解,带大家进入Fidder的世界,本文会让你明白,Fidder不仅是一个抓包分析工具,也是一个请求发送工具,更加可以当作为Mock Serv ...

  2. vue.单选和多选,纯css自定义单选框样式

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  3. CSS学习笔记三:自定义单选框,复选框,开关

    一点一点学习CCS,这次学习了如何自定义单选框,复选框以及开关. 一.单选框 1.先写好body里面的样式,先写几个框 <body> <div class="radio-1 ...

  4. 只用CSS美化选择框

    只用CSS美化选择框 2012-03-02 11:04 by iBlog, 26240 阅读, 14 评论, 收藏, 编辑 <本文译自Style a Select Box Using Only ...

  5. bootStrap-table服务器端后台分页的使用,以及自定义搜索框的实现,前端代码到数据查询超详细讲解

    关于分页,之前一直纯手写js代码来实现,最近又需要用到分页,找了好多最终确定bootstrap-table,正好前端页面用的是bootstrap. 首先下载BootStrap-table的js和CSS ...

  6. 帮助自定义选择框样式的Javascript - DropKick.js

    来源:GBin1.com 在线演示  在线下载 当你想要设计一个页面样式时,没有什么比表单更让人头疼了.而当你设计一个表单的样式时,最让你头疼的就应该非下拉框<select>莫属了. 我们 ...

  7. vue2.0 自定义 提示框(Toast)组件

    1.自定义 提示框 组件 src / components / Toast / index.js /** * 自定义 提示框( Toast )组件 */ var Toast = {}; var sho ...

  8. vue 自定义 提示框(Toast)组件

    1.自定义 提示框 组件 src / components / Toast / index.js /** * 自定义 提示框( Toast )组件 */ var Toast = {}; var sho ...

  9. 在ASP.NET中引用自定义提示框

    在html网页中自定义提示框 正文: 在一般的B/S架构中项目,与用户的交互信息是非常重要的.在一般的情况下,设计人员都在把用户信息呈现在html中,用div和span去弹出相关信息.对于一般的情况而 ...

随机推荐

  1. P3622 [APIO2007]【一本通提高状态压缩类动态规划】动物园

    广告 绿树公司 - 官方网站:https://wangping-lvshu.github.io/LvshuNew/ 绿树智能 - 官方网站:https://wangping-lvshu.github. ...

  2. CF1706A Another String Minimization Problem 题解

    题意 给定一个长度为 \(n\) 的序列 \(a\) 以及一个长度为 \(m\) 的字符串 \(s\),初始 \(s\) 均为 \(\text{B}\),第 \(i\) 次操作可以把 \(s_{a_i ...

  3. 聊聊 C++ 中的几种智能指针 (下)

    一:背景 上一篇我们聊到了C++ 的 auto_ptr ,有朋友说已经在 C++ 17 中被弃用了,感谢朋友提醒,今天我们来聊一下 C++ 11 中引入的几个智能指针. unique_ptr shar ...

  4. .Net 之时间轮算法(终极版)

    关于时间轮算法的起始 我也认真的看了时间轮算法相关,大致都是如下的一个图 个人认为的问题 大部分文章在解释这个为何用时间轮的时候都再说 假设我们现在有一个很大的数组,专门用于存放延时任务.它的精度达到 ...

  5. 清北学堂 2020 国庆J2考前综合强化 Day5

    目录 1. 题目 T1 a 题目描述 Sol T2 b 题目描述 Sol T3 c 题目描述 Sol T4 d 题目描述 Sol 2. 算法 - 贪心 & 数学 1. 贪心 2. 数学 2.1 ...

  6. 2499-springboot使用jar形式打包在linux上运行

    由于maven使用的种种问题,以前springboot版本变化较快带来的一些不兼容问题,是否考虑下使用jar形式运行web程序,而不是固守于war包与tomcat: 主要原理有两点: 使用nohup来 ...

  7. Jetpack Compose学习(8)——State及remeber

    原文地址: Jetpack Compose学习(8)--State状态及remeber关键字 - Stars-One的杂货小窝 之前我们使用TextField,使用到了两个关键字remember和mu ...

  8. YII behaviors使用

    文件 frontend/libs/FilterTest.php <?php /** * Created by PhpStorm. * Date: 2016/5/27 * Time: 14:16 ...

  9. python面向对象的特征及反射

    目录 派生类实操 面向对象特征之封装 property伪装属性(python内置装饰器) 面向对象特征之多态 面向对象之反射 派生类实操 1.将时间字典序列化成json格式,由于序列化数据类型的要求, ...

  10. Docker容器保姆:在centos7.6上利用docker-compose统一管理容器和服务

    原文转载自「刘悦的技术博客」https://v3u.cn/a_id_108 众所周知,一个大型的Docker容器组成的微服务应用中,容器的数量是非常巨大的,如果依赖传统的人工配置方式进行维护,对于开发 ...