注册 登录
  • 欢迎访问开心洋葱网站,在线教程,推荐使用最新版火狐浏览器和Chrome浏览器访问本网站,欢迎加入开心洋葱 QQ群
  • 为方便开心洋葱网用户,开心洋葱官网已经开启复制功能!
  • 欢迎访问开心洋葱网站,手机也能访问哦~欢迎加入开心洋葱多维思维学习平台 QQ群
  • 如果您觉得本站非常有看点,那么赶紧使用Ctrl+D 收藏开心洋葱吧~~~~~~~~~~~~~!
  • 由于近期流量激增,小站的ECS没能经的起亲们的访问,本站依然没有盈利,如果各位看如果觉着文字不错,还请看官给小站打个赏~~~~~~~~~~~~~!

html+css倒三角效果,不用图片实现倒三角效果及原理

实用代码 开心洋葱 2135次浏览 已收录 0个评论 手机上查看

html+css倒三角效果,不用图片实现倒三角效果及原理

css实现倒三角原理:
  3边有10像素的边框,其中左边颜色和其他两边不一样,无内容,是这样的。

html+css倒三角效果,不用图片实现倒三角效果及原理
你往div里面随便加点内容进去试试就知道了,如<div id="com_a">abc</div>

也可以改改样式看看效果
#com_a{
 border-top:10px solid #FFFFCC;
 border-left:10px solid #FF3300;
 border-bottom:10px solid #FFFFCC;
 border-right:10px solid #FF3300;
}

运行代码为:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>css 三角效果 实现倒三角的提示效果</title>
</head>
<style>
body{ margin:0 auto;}
 #menu { width:800px;padding:0;margin:40px auto;list-style-type:none;display:<span href="http://www.awzsr.com" onclick="tagshow(event)" class="t_tag">tab</span>le;}
#menu li {width:100px; float:left; line-height:30px}
#menu a {position:relative;display:block; text-decoration:none; background:#cccccc;width:100px; }
#menu a span {display:block; font-weight:bold;color:#000; border-style:solid;border-width:0px 2px 2px 0px; border-color:#fff #fff #06a #fff;text-align:center; }
#menu a em {display:none;}
#menu a:hover {background:#FF0000;}
#menu a:hover span {color:#fff; }
#menu a:hover em {display:block; overflow:hidden; border:6px solid #06a; border-color:#06a #fff; border-width:6px 6px 0 6px; position:absolute; left:50%; top:100%;margin-left:-6px;}
</style>
<body>
   <ul id="menu">
      <li><a href="http://www.awzsr.com" target="_blank"><span>倒三角效果</span><em></em></a></li>
      <li><a href="http://www.awzsr.com" target="_blank"><span>CSS实现</span><em></em></a></li>
      <li><a href="http://www.awzsr.com" target="_blank"><span>倒三角效果</span><em></em></a></li>
      <li><a href="http://www.awzsr.com" target="_blank"><span>CSS实现</span><em></em></a></li>
      <li><a href="http://www.awzsr.com" target="_blank"><span>倒三角效果</span><em></em></a></li>
      <li><a href="http://www.awzsr.com" target="_blank"><span>CSS实现</span><em></em></a></li>
      <li><a href="http://www.awzsr.com" target="_blank"><span>倒三角效果</span><em></em></a></li>
      <li><a href="http://www.awzsr.com" target="_blank"><span>CSS实现</span><em></em></a></li>
    </ul>
   
<div style="text-align:center;">
文章来源于:爱问知识人网络    http://www.awzsr.com
    </div>
   
</body>
</html>
               


开心洋葱 , 版权所有丨如未注明 , 均为原创丨未经授权请勿修改 , 转载请注明html+css倒三角效果,不用图片实现倒三角效果及原理
喜欢 (0)
[开心洋葱]
分享 (0)
关于作者:
开心洋葱,开心洋葱头,水墨

您必须 登录 才能发表评论!

……
加载中……