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. Rancher 构建 CI/CD 自动化流程 - 动态配置 Jenkins-slave(二)

    一.说明 1.1 说明 前面介绍采用 Jenkinsfile + KubernetesPod.yaml 方式进行部署项目(Rancher 构建 CI/CD 自动化流程 - 动态配置 Jenkins-s ...

  2. 【C++】内联函数(inline)和宏定义(# define)的优劣及其区别

    一.宏定义:# define 1.为什么要使用宏? 因为调用宏比调用函数更有效率,函数的调用必须要将程序的执行顺序转移到函数所存放的内存地址中,将函数程序内容执行完后,再返回到执行该函数前的地方,这种 ...

  3. CentOS6.5 更新gcc-7.3.0

    # [1]查看当前版本 gcc --version # 显示4.8.3 # [2]下载更新版本包 # 经实测,本地下载包很慢,建议用迅雷下载(新建任务,输入下载地址:https://ftp.gnu.o ...

  4. NET Core 导入web.config配置文件

    1.首先需要在NET Core项目中引入System.Configuration.ConfigurationManager,它可以读取web.config中的相关配置信息. 2. 将web.confi ...

  5. SecureCRT上传本地文件到linux

    1.使用crt登录到需要操作的linux系统 2.按Alt+P打开sftp传输界面 3.输入pur指令加文件路径,例如:put E://srs-3.0.zip按enter就可以 4.再返回crt界面, ...

  6. 浅浅的叙WPF之数据驱动与命令

    之前一直开发Winfrom程序,由于近一段时间转开发Wpf程序,刚好拜读刘铁锰<深入浅出WPF>对此有一些理解,如有误导指出,还望斧正!!! 说道WPF数据驱动的编程思想,MVVM,是为W ...

  7. jquery.validate.unobtrusive的使用

    应用 一.引入 <script src="Scripts/jquery-1.7.1.min.js"></script> <script src=&qu ...

  8. ERP会计科目表初始化

    2019会计科目表 一.资产类 顺序号 编号 会计科目名称 会计科目适用范围 顺序号 编号 会计科目名称 会计科目适用范围 1 1001 库存现金 38 1431 周转材料 建造承包商专用 2 100 ...

  9. window 10 npm install node-sass报错

    最近准备想用vue-cli初始化一个项目,需要sass-loader编译: 发现window下npm install node-sass和sass-loader一直报错, window 命令行中提示我 ...

  10. JavaScript 运算符(Operator)

    一.算数运算符 1.加法(+) 表示操作数相加:  处理特殊值规则: 如果两个操作数都是字符串,则将第二个操作数与第一个操作数拼接起来: 如果只有一个操作数是字符串,则将另一个操作数转换为字符串,然后 ...