2010-07-05 19:57:28 博主 回复 用户昵称

在秋日真的有轻柔吧。

上边效果与理想的有误差，代码布不上去，下边是源代码，另行保存后查看真正效果，下图是真正效果，区别在三角处，里面颜色

<!DOCTYPE html>
<html lang="en-US">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style>
.depth_2 { margin-left: 29px; margin-top: 18px; border: 1px solid #e3e3e3; background: #fffeee; padding: 10px 6px 8px 10px; position: relative; zoom: 1; }
.depth_2 .triangle { border-color: transparent; border-style: dashed dashed solid dashed; border-width: 0 6px 6px 6px; border-bottom-color: #e3e3e3; display: block; width: 0; height: 0; line-height: 0; position: absolute; top: -6px; left: 35px; }
.depth_2 .trianglee { width: 0; height: 0; line-height: 0; position: absolute; top: 2px; left: -5px; border-color: transparent; border-style: dashed dashed solid dashed; border-width: 0 5px 5px 5px; border-bottom-color: #fffeee; display: block; }
</style>
</head>
<body>
<div class="depth_2">
  <div class="triangle"><span class="trianglee"></span> </div>
  <p class="comment_info">
    <time datetime="2013-09-18T10:07:07+00:00" class="entry_date">2010-07-05 19:57:28</time>
    博主 回复 <a class="comment_author" title="用户昵称" href="#">用户昵称</a></p>
  <p class="comment_cont">在秋日真的有轻柔吧。</p>
</div>
</body>
</html>

不用图片做的三角语言框效果，纯样式编写，css三角样式写法的更多相关文章

  1. 用CSS3实现带小三角形的div框(不用图片)

    现在看到了很多带小三角形的方框,如微信.Mac版的QQ.QQ空间的时间轴等等,在聊天或者是发表的状态的内容外面都有一个带小三角形的矩形框包围着,感觉看着很不错,于是决定亲自动手写一个,我上次用的是偏移 ...

  2. jq实现百度图片移入移出内容提示框上下左右移动的效果

    闲来无聊,看到百度图片hover的时候提示框的效果,遂想试一试自己能否实现. 百度图片hover的效果: 需求: 1. 当鼠标从图片上部移入的时候,提示框从上部移到正常位置.从上部移出的时候,提示框从 ...

  3. css实现气泡框效果

    前提:气泡框或者提示框是网页很常见的,实现它的方式有很多,我们以前最常用的就是切图片 然后通过 "定位" 方式 定位到相应的位置,但是用这种方式维护很麻烦,比如设计师想改成另外一种 ...

  4. GridView实现一个图片加多个文本框

    GridView的使用是很简单的,API Demo中有例子,但是要实现复杂的GridView,就需要自定义了. 今天我们要实现如下的效果: 先说它的布局,它是由gridview和grid_item两部 ...

  5. 使用bootstrap的插件实现模态框效果

    在上一篇文章中,我们使用 js+css 实现了模态框效果,在理解了模态框的基本实现方法和实现效果后,我们就要寻找更快捷的方法,又快又好的来完成模态框开发需求,从而节约时间,提高效率.一个好的轮子,不仅 ...

  6. 使用bootstrap的JS插件实现模态框效果

    在上一篇文章中,我们使用 js+css 实现了模态框效果,在理解了模态框的基本实现方法和实现效果后,我们就要寻找更快捷的方法,又快又好的来完成模态框开发需求,从而节约时间,提高效率.一个好的轮子,不仅 ...

  7. jQuery动态提示消息框效果

    效果预览:http://keleyi.com/keleyi/phtml/jqtexiao/2.htm 原文:http://keleyi.com/a/bjac/hxv86dyi.htm <!DOC ...

  8. JQuery实现页面企业广告图片切换和新闻列表滚动效果

    最近用到一个页面上图片左右切换和新闻列表滚动呈现的效果,整理如下: 前段代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transit ...

  9. Combox 实现百度收索框效果

    标题中所谓百度收缩框效果,就是在输入数据的时候,自动提示,来张图就明白了: 用Combox来实现这个功能只是需要设置三个A开头的属性就OK了:AutoCompleteSource.AutoComple ...

随机推荐

  1. javascript的立即执行函数

    在javascript中有引入立即执行函数的概念,那么什么是立即执行函数呢?立即执行函数又是怎么写的呢?立即执行函数与普通函数有什么区别呢? 先来看看一般的函数: function a(){ var ...

  2. | C语言I作业03

    | C语言I作业03 标签: 18软件 李煦亮 问题 答案 这个作业属于那个课程 C语言程序设计I 这个作业要求在哪里 https://edu.cnblogs.com 我在这个课程的目标是 学会和掌握 ...

  3. 【剑指offer】剪绳子

    题目描述 给你一根长度为n的绳子,请把绳子剪成m段(m.n都是整数,n>1并且m>1),每段绳子的长度记为k[0],k[1],...,k[m].请问k[0]xk[1]x...xk[m]可能 ...

  4. Kafka Consumer Lag Monitoring

    Sematext Monitoring  是最全面的Kafka监视解决方案之一,可捕获约200个Kafka指标,包括Kafka Broker,Producer和Consumer指标.尽管其中许多指标很 ...

  5. Linux学习笔记之RAID笔记

    RAID: Redundant Arrays of Inexpensive Disks Independent Berkeley: A case for Redundent Arrays of Ine ...

  6. NETCore使用带有权限验证的Swagger

    原文:NETCore使用带有权限验证的Swagger 文章目录 Swagger 什么是Swagger NuGet安装 Startup注册Swagger 设置默认首页打开Swagger 为接口添加注释 ...

  7. 面对代码中过多的if...else的解决方法

    原 6个实例详解如何把if-else代码重构成高质量代码 置顶 2017年09月11日 23:47:12 yinnnnnnn 阅读数 21433更多 分类专栏: # 理论   版权声明:本文为博主原创 ...

  8. 对ssm框架里面的一些常用注解的理解

    @Componcnt :作用就是把当前类对象存入spring容器中 属性:value 用于指定bean的id 当我们不写的时候默认就是当前类名,并且首字母要小写 ------------------- ...

  9. C#生成唯一不重复订单号帮助类

    1.使用场景 通常,在做一些表单的功能时,需要生成唯一不重复的订单单号,本文提供的帮助类可以适合大多数场景的单号生成使用,拿来即用,方便快捷无重复.而且,在高并发的情况下也是可以使用的. 之前看到有人 ...

  10. 递归-求n和n以前的自然数

    #include <iostream> using namespace std; void zrs(int n)//用递归求自然数(n和它之前) { ) { cout<<< ...