如何使用CSS实现小三角形效果:
建议:尽可能的手写代码，可以有效的提高学习效率和深度。
在众多的网页效果中，都有小三角形效果的应用，能够增加特定应用的美观度，下面就给出一段实例代码，里面介绍了两种实现小三角头效果的方式。代码如下:

<!DOCTYPE html>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<meta name="author" content="http://www.softwhy.com/" />

<title>三种纯CSS实现三角形的方法</title>

<style type="text/css">

.message-box

{

  position:relative;

  float:left;

  margin:80px 0 0 100px;

  width:240px;

  height:60px;

  line-height:60px;

  border:1px solid #000;

  text-align:center;

  color:#0C7823;

}

.triangle-border

{

  position:absolute;

  left:100px;

  overflow:hidden;

  width:0;

  height:0;

  border-width:10px;

  border-style:none dashed solid dashed;

}

.tb-border

{

  top:-10px;

  border-color:#000 transparent #000 transparent;

}

.tb-background

{

  top:-9px;

  border-color:transparent transparent #fff transparent;

}

/*字符*/

.triangle-character

{

  position:absolute;

  left:100px;

  overflow:hidden;

  width:26px;

  height:26px;

  font:normal 26px "宋体";

}

.tc-background

{

  top:-12px;

  color:#FFF;

}

.tc-border

{

  top:-13px;

  color:#000;

}

</style>

</head>

<body>

<div class="message-box"> <span> border 属性实现</span>

  <div class="triangle-border tb-border"></div>

  <div class="triangle-border tb-background"></div>

</div>

<div class="message-box"> <span> ◆ 字符实现</span>

  <div class="triangle-character tc-border">◆</div>

  <div class="triangle-character tc-background">◆</div>

</div>

</body>

</html>

原文地址是:http://www.softwhy.com/forum.php?mod=viewthread&tid=4586

更多内容可以参阅:http://www.softwhy.com/divcss/

如何使用CSS实现小三角形效果的更多相关文章

  1. 通过css实现小三角形

    下面是用css做小三角形的demo, <!DOCTYPE html><html lang="en"><head> <meta charse ...

  2. 用CSS创建小三角形问题（笔试题常考）

    笔试题中经常遇到用CSS实现某个Div边框添加三角形问题,掌握一点,合理利用div的边框,当div有宽有高时,边框就是不起眼的边框,当div的宽高为0时,边框就是一个小方块,把剩下的三个边透明就是神奇 ...

  3. css实现小三角效果

    <!DOCTYPE html><html><head><meta charset="UTF-8"> <title>新闻标 ...

  4. css一些小的效果

    1.http://www.shejidaren.com/creative-dashboard-designs.html 网址:  

  5. CSS边框外的小三角形+阴影效果的实现。

    ...虽然是一个很小的问题,但其实还是挺实用的. 实现一个边框外的角. 用纯CSS来写. 一开始实现的效果是这个样子的. 但是这个效果没有办法给他附带阴影,所以换了一种写法.实现成了这个样子 想要实现 ...

  6. 用纯css写一个常见的小三角形

    .test{ margin:50px auto; width: 0; height: 0; overflow: hidden; border-width: 10px; border-color: #0 ...

  7. css实现小三角（原理）

    效果图如图1所示:(简单示范,有点丑,莫介意) PS:兼容IE,FF , chrome ,360安全浏览器 先讲下原理吧,如图2所示: 这个div的样式如下所示: div{ width: 0px; h ...

  8. css的小技巧

    前几天看到<css揭秘>这本书,第一感觉是 css怎么能出这么厚的一本书,不过 细细一想,用好css真的可以实现很多想要的效果,节省很多js代码. 总结几个css的小技巧: 1,将所有元素 ...

  9. CSS3做小三角形

    aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAXgAAAA2CAIAAABC2hVZAAAgAElEQVR4nKzcd3cbV57web+1p20FW8

随机推荐

  1. [iOS基础控件 - 6.10] Notification 通知机制

    A.定义      iOS程序都有一个NSNotificationCenter的单例对象,用来负责发布不同对象之间的通知      任何对象都能够在NSNotificationCenter发布通知,发 ...

  2. jQuery基础学习7——层次选择器find()方法

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  3. 从Jetty、Tomcat和Mina中提炼NIO构架网络服务器的经典模式（二）

    本文转载自 http://blog.csdn.net/cutesource/article/details/6192145 下面再来看看Tomcat是如何使用NIO来构架Connector这块的. 先 ...

  4. 一个简单的Socket通信Demo

    服务器端Demo: Server.java(服务器端运行主程序,直接运行): package cn.wjs; import java.net.InetAddress; import java.net. ...

  5. Proactor设计模式：单线程高并发

    Boost::Asio为同步和异步操作提供了并行支持,异步支持基于前摄器模式,这种模式的优点和缺点可能比只同步或反应器方法要低. 让我们检查一下Boost::Asio是如何实现前摄器模式的,没有引用基 ...

  6. jsp验证码点击刷新

    <img src="<%=basePath%>manage/code" alt="验证码" height="20" ali ...

  7. cmp排序hdoj 1106排序

    上班之余抽点时间出来写写博文,希望对新接触的朋友有帮助.今天在这里和大家一起学习一下cmp排序 /*标题还是比拟的水吧,但是花的时间还是比拟的多,心不够静*/ #include <iostrea ...

  8. xxx-servlet.xml vs applicationContext.xml

    Spring lets you define multiple contexts in a parent-child hierarchy. The applicationContext.xml def ...

  9. androidstudio can't run git.exe

    今天用android studio从git下载项目的时候遇到一个问题,提示说can't run git.exe 问了下度娘以及谷歌.但是无果,后面捣鼓了一阵,下了一个git windows版本后,在a ...

  10. JAVA的StringBuffer类

    StringBuffer类和String一样,也用来代表字符串,只是由于StringBuffer的内部实现方式和String不同,所以StringBuffer在进行字符串处理时,不生成新的对象,在内存 ...