如何使用CSS实现小三角形效果

如何使用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实现小三角形效果

最新文章

热门文章