<!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. Spring+SpringMVC+Hibernate简单整合（转）

    SpringMVC又一个漂亮的web框架,他与Struts2并驾齐驱,Struts出世早而占据了一定优势,下面同样做一个简单的应用实例,介绍SpringMVC的基本用法,接下来的博客也将梳理一下Str ...

  2. 《连载 | 物联网框架ServerSuperIO教程》- 6.并发通讯模式开发及注意事项

    1.C#跨平台物联网通讯框架ServerSuperIO(SSIO)介绍 <连载 | 物联网框架ServerSuperIO教程>1.4种通讯模式机制. <连载 | 物联网框架Serve ...

  3. 【转】Android SDK Samples，学习Android的好方法

    转载地址:http://blog.csdn.net/rowland001/article/details/50886288 从今天开始呢,我要开始学习Google家自己出的Android代码示例,总觉 ...

  4. IOS 杂笔－14（被人遗忘的owner）

    *owner在开发中现在已经很少用了 有兴趣的童鞋可以看看* 我们遇到owner通常是在类似 [[[NSBundle mainBundle] loadNibNamed:@"Food" ...

  5. 解决apache启动错误"httpd:Could not reliably determine..."

    启动apache遇到错误:httpd: Could not reliably determine the server's fully qualified domain name [root@serv ...

  6. MapReduce 的架构

    主从结构 主节点,只有一个 : JobTracker   ,JobTracker 一般情况下,运行在 namenode 这台机器上. 从节点,有很多个 : TaskTrackers  ,  部署在剩下 ...

  7. yii2 RESTful api的详细使用

    作者:白狼 出处:http://www.manks.top/yii2-restful-api.html 本文版权归作者,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则 ...

  8. 每日Scrum站会实践推荐

    流程 1.团队在Scrum 白板前集中,推荐围成一个半圆形状. 2.最左边的成员开始讲述昨天/上一次Scrum每日站会后到现在为止,完成了什么任务,只需讲对应的任务就行了,不要讲很长的故事. 3.讲述 ...

  9. Hibernate 系列 07 - Hibernate中Java对象的三种状态

    引导目录: Hibernate 系列教程 目录 1. Java对象的三种状态 当应用通过调用Hibernate API与框架发生交互时,需要从持久化的角度关注应用对象的生命周期. 持久化声明周期是Hi ...

  10. 安装.NET Framework进度条卡住不动的解决方案

    VS在安装之前需要安装.NET Framework,我安装的是4.0版本.但是安装进度条到一半左右时就卡住不动了.前前后后重试多次,还有几次重新开机,但都没用. 开始还以为是安装的系统有问题.后来在网 ...