<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
.triangle{
width:100px;
background:#fff;
padding:10px 20px;
color:#333;
border-radius:4px;
position:absolute;
top:30px;
left:30px;
border:1px solid #333;
}
.triangle span{
display:block;
width:0;
height:0;
border-width:10px;
border-style:solid;
border-color:#333 #333 transparent transparent;
position:absolute;
top:8px;
left:-20px;
}
.triangle em{
display:block;
width:0;
height:0;
border-width: 10px;
border-style:solid;
border-color:#fff #fff transparent transparent;
position:absolute;
top:-9px;
left:-8px;
}
</style>
</head>
<body>
<div class="triangle">
<span><em></em></span>纯CSS写带边框的三角形
</div>
</body>
</html>

css挤带边框的三角的更多相关文章

  1. 利用css制作带边框的小三角

    标签(空格分隔):css 在项目中会使用到的小实例,目前知道的有两种方法来实现 设置元素的宽和高,利用rotate实现,比较简单的一种 div{ width: 10px; height: 10px; ...

  2. css实现带边框的冒泡提示框

    需求是实现这种效果, 因为内容是动态的,使用图片不是很好: 原因: 如果内容确定只是一行,可以效果图裁剪3部分,分别是两侧和中间部分,然后用backgroud插入三张图片,但是要是内容是2行就不好处理 ...

  3. CSS九宫格带边框的多种实现

    九宫格,每个单元格滑动上去显示完整边框. 本身考察的知识点并不复杂,margin负值的遮挡,以及流布局中relative的超越. 代码固定部分是这样的, <div> <div> ...

  4. css写带边框的三角形

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

  5. 纯css写带小三角对话框

    在实际样式中经常会遇到要写类似对话框的样式,而这种样式往往会有一个小三角,如下所示: 那么如何用css写出来呢,其实很简单,先让父元素相对定位,然后运用css的伪类before或after.就可以写个 ...

  6. css实现带箭头选项卡

    这阵子在做一个web端项目中遇到一个问题,需要实现带箭头的选项卡点击可切换.起初没想太多,直接切一个向上的小箭头图片,外层div设置相同颜色的边框,再用相对定位和绝对定位.这种方法是可行的,但是因为手 ...

  7. 使用纯CSS实现带箭头的提示框

    爱编程爱分享,原创文章,转载请注明出处,谢谢!http://www.cnblogs.com/fozero/p/6187323.html 1.全部代码 <!DOCTYPE html> < ...

  8. UIImage类扩展返回一个带边框的圆形图片

    /** * 将image转换为圆型带边框的图片(最好写一个UIImage的类扩展) * * @param name 图片的名字 * @param borderWidth 外层边框的宽度 * @para ...

  9. Jquery中css()方法获取边框长度

    1. JQuery中可以使用css()方法获取块元素的边框宽度,如下: $("divMode").css("border-left-width");//左边框长 ...

随机推荐

  1. 分享一些学习资料-大量PDF电子书

    分享一些学习用的电子书籍,给那些喜欢看书而不一定有机会买书的童鞋. 反对积分下载,提倡自由分享. 分享地址: http://pan.baidu.com/s/1qWK5V0g 提取密码:   np33 ...

  2. redis 安装

    安装wget http://download.redis.io/releases/redis-3.2.3.tar.gztar -xzvf redis-3.2.3.tar.gzcd redis-3.2. ...

  3. javascript的理解及经典案例

    js的简介: JavaScript是一种能让你的网页更加生动活泼的程式语言,也是目前网页中设计中最容易学又最方便的语言. 你可以利用JavaScript轻易的做出亲切的欢迎讯息.漂亮的数字钟.有广告效 ...

  4. touchstart,touchmove,touchend事件 写法

    jQuery写法: $('#id').on('touchstart',function(e) { var _touch = e.originalEvent.targetTouches[0]; var ...

  5. Date小技巧：set相关操作及应用_获取当前月（季度/年）的最后一天

    set操作还是有不少的,具体见 http://www.w3school.com.cn/jsref/jsref_obj_date.asp, 今天我就只说 setFullYear, setMonth, s ...

  6. 【IOS开发笔记03-视图相关】简单计算器的实现

    UIView 经过前几天的快速学习,我们初步了解的IOS开发的一些知识,中间因为拉的太急,忽略了很多基础知识点,这些知识点单独拿出来学习太过枯燥,我们在今后的项目中再逐步补齐,今天我们来学习APP视图 ...

  7. 获得设备的唯一标识符UDID

    在IOS5之后,苹果为避免根据UDID获得用户的信息,而禁止使用uniqueIdentifier获得UDID,但是仍有些应用需要根据UDID区分设备 有一个系统的库IOKit.framework可以获 ...

  8. 在项目中使用ExtJS

    主要目录文件介绍 builds:压缩后的ExtJS代码,体积更小,更快:docs:开发文档:examples:官方演示示例:locale:多国语言资源文件:pkgs:ExtJS各部分功能的打包文件:r ...

  9. [Erlang 0120] Know a little Core Erlang

      Erlang开发者或多或少都用过或者听说过Core erlang,它是什么样的呢?新建一个测试模块a.erl,如下操作会生成core erlang代码而非a.beam:   Eshell V6.0 ...

  10. FTP概述

    FTP是什么? 早期三大网络应用之一:ftp(40年).http.mail ftp file transfer protocol 文件传输协议 FTP服务概述 C/S模型 客户端-服务器 FTP采用双 ...