如何使用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. FZU 2082 过路费 (树链剖分 修改单边权)

    题目链接:http://acm.fzu.edu.cn/problem.php?pid=2082 树链剖分模版题,求和,修改单边权. #include <iostream> #include ...

  2. iOS－图片png

    把图片添加到工程里面:就报了108个警告!!! 然后我发现我添加的图片有很多命名是这样子的: xcode去找图片的时候是按照什么方式找的呢????? 还发现有好几张同名的图片..... ------- ...

  3. I/O流的学习

    一.I/O流 1.判定是输入还是输出我们应该站在程序的立场: 2.判断传输的是字节还是字符,从而决定管道的大小,字节传递是根本,可以传递所有的数据类型,字符传递专门用来传递文本数据,字节主要用来传递二 ...

  4. 函数定义从零开始学C++之从C到C++（一）：const与#define、结构体对齐、函数重载name mangling、new/delete 等

    今天一直在学习函数定义之类的问题,下午正好有机会和大家共享一下. 一.bool 类型 逻辑型也称布尔型,其取值为true(逻辑真)和false(逻辑假),存储字节数在不同编译系统中可能有所不同,VC+ ...

  5. sql 指令

    SELECT 是用来做什么的呢?一个最经常使用的方式是将资料从数据库中的表格内选出.从这一句回答中.我们立即能够看到两个keyword:从 (FROM)数据库中的表格内选出 (SELECT).(表格是 ...

  6. Codeforces Round #330 (Div. 2)D. Max and Bike 二分 物理

    D. Max and Bike Time Limit: 20 Sec Memory Limit: 256 MB 题目连接 http://codeforces.com/contest/595/probl ...

  7. Codeforces Gym 100610 Problem H. Horrible Truth 瞎搞

    Problem H. Horrible Truth Time Limit: 1 Sec Memory Limit: 256 MB 题目连接 http://codeforces.com/gym/1006 ...

  8. -_-#【JS】defer / async

    引用JavaScript文件时的两个属性defer和async <script src="js1.js" defer></script> <scrip ...

  9. 图解JS原型链

    一:任何一个对象都有一个prototype的属性,在js中可以把它记为:__proto__ 当初ECMAscript的发明者为了简化这门语言,同时又保持继承的属性,于是就设计了这个链表.. 在数据结构 ...

  10. Python拼接多张图片

    写机器学习相关博文,经常会碰到很多公式,而Latex正式编辑公式的利器.目前国内常用的博客系统,好像只有博客园支持,所以当初选择落户博客园.我现在基本都是用Latex写博文,然后要发表到博客园上与大家 ...