<!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. GJM ：Unity使用EasyAR实现脱卡功能

    首先说下大致思路当卡片离开摄像头时间,ImageTarget-Image的SetActive (false),所以其子物体(model)也就不显示了,因此解决的办法就是在Target (false)时 ...

  2. WWDC2016 观后杂感

    WWDC2016已经落幕了,我没有熬夜看看的录播. 总的来说觉得还是比较兴奋的,因为苹果将更多的APi开发出来了,可以玩出更多花样了.

  3. android Base64 加密

    一 Base64加密 import java.io.ByteArrayOutputStream;import java.io.IOException;import java.io.OutputStre ...

  4. j2ee项目服务器怎样部署？

    1.右击项目  >>  点击如图1中❶  >>  Project(选择项目)  >>  Add  如图1: 图1 2.点击Add  >>  Server ...

  5. Oracle数据字典

    数据字典-简介 Oracle数据字典的名称由前缀和后缀组成,使用下划线"_"连接,其代表的含义如下: ● DBA_:包含数据库实例的所有对象信息. ● V$_:当前实例的动态视图, ...

  6. mongodb 3.x 之实用新功能窥看[2] ——使用$lookup做多表关联处理

    这篇我们来看mongodb另一个非常有意思的东西,那就是$lookup,我们知道mongodb是一个文档型的数据库,而且它也是最像关系型数据库的 一种nosql,但是呢,既然mongodb是无模式的, ...

  7. java中使用javamail发送邮件

    1. 电子邮件协议 电子邮件的在网络中传输和网页一样需要遵从特定的协议,常用的电子邮件协议包括 SMTP,POP3,IMAP. 其中邮件的创建和发送只需要用到 SMTP协议,所有本文也只会涉及到SMT ...

  8. Java中serialVersionUID的解释及两种生成方式的区别（转载）

    转载自:http://blog.csdn.net/xuanxiaochuan/article/details/25052057 serialVersionUID作用:        序列化时为了保持版 ...

  9. Prometheus 系统监控方案 二 安装与配置

    下载Prometheus 下载最新安装包,本文说的都是在Linux x64下面内容,其它平台没尝试过,请选择合适的下载. Prometheus 主程序,主要是负责存储.抓取.聚合.查询方面. Aler ...

  10. Windows Git安装指南

    步骤如下: 1.资源下载 :Git-1.9.4-preview20140815.exe http://code.google.com/p/tortoisegit/downloads/list 2.安装 ...