CSS小技巧 用CSS写出一个三角形小图标
2012-09-27 11:31
323 查看
<!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=utf-8" /> <title>MJBlog(mj.588cy.com)</title> <style type="text/css"> em{ font-style: normal; } *{margin:0;padding:0;font-size:12px;list-style:none;border:0;} body{ margin:0px; padding:0px; background-color:#f0f0f0; font-family:Arial, Helvetica, sans-serif;} a{ text-decoration:none;} .top{ width:760px; height:30px; border-bottom:1px solid #dbdbdb; margin:0px auto;} .logo{ width:300px; height:30px; line-height:30px; float:left; font-size:14px; margin:0px 5px;} .logo a{ color:#666666;} .denglu{ height:30px; line-height:30px; float:right; font-size:14px;} .denglu a{ color:#666666; margin:0px 10px;} .clear{ display:block; height:0px; line-height:0px; font-size:0px; clear:both;} .box{ width:760px; border-top:1px solid #FFFFFF; height:auto; margin:0px auto;} /*用CSS写出一个三角形小图标,这个是用em标签*/ .list_a{ width:200px; height:auto; margin:20px auto;} .list_a li { height:25px} .list_a em { display:block; font:0/0 "宋体"; border:4px solid; border-color:#f0f0f0 #f0f0f0 #f0f0f0 #921902; float:left; margin-top:2px} /*用CSS写出一个三角形小图标,这个是用div标签*/ .list_b{ width:200px; height:auto; margin:20px auto; background-color:#FFFFFF; padding:10px;} .a {font:0/0 "宋体"; border:25px solid; border-color:#fff #fff #fff #000; width:0px; height:0px; margin:10px auto;} .b {font:0/0 "宋体"; border:25px solid; border-color:#fff #fff blue #fff; width:0px; height:0px; margin:10px auto;} .c {font:0/0 "宋体"; border:25px solid; border-color:#fff green #fff #fff; width:0px; height:0px; margin:10px auto;} .d {font:0/0 "宋体"; border:25px solid; border-color:red blue #000 green; width:0px; height:0px; margin:10px auto;} </style> </head> <body> <div class="top"> <div class="logo"><a href="http://mj.588cy.com">MJBlog</a></div> <div class="denglu"><a href="#">登录</a><a href="#">注册</a></div> <div class="clear"></div> </div> <div class="box"> <div class="list_a"> <ul> <li><em></em>这是一个带三角的新闻列表</li> <li><em></em>这是一个带三角的新闻列表</li> <li><em></em>这是一个带三角的新闻列表</li> <li><em></em>这是一个带三角的新闻列表</li> <li><em></em>这是一个带三角的新闻列表</li> </ul> </div> <div class="list_b"> <div class="a"></div> <div class="b"></div> <div class="c"></div> <div class="d"></div> </div> </div> </body> </html>
CSS属性解释:
【font:0/0 "宋体"】这个字体和行高分别为0;相当于font:fontsize/line-height;
【border-color:red blue #000 green】 这四个颜色分别指的是顺时针上右下左
其实就是建一个没有内容只有边框的标签,三个边框颜色为背景色,一个为你需要的颜色。
相关文章推荐
- 用css写出一个小三角形图标
- 如何用html5加css写出一个实心三角形和空心三角行
- 一个标签的72变,打造一个纯CSS图标库
- HTML+CSS写一个三角形(原理+实例)
- 用css打造一个三角形箭头
- 经典CSS实现三角形图标原理解析
- 纯CSS制作各种各样的网页图标(三角形、暂停按钮、下载箭头、加号等)
- CSS实现三角形图标的原理
- i标签通过css写出一个向下的箭头
- 一个简单实用的css loading图标
- 纯CSS 实现三角形图标
- 使用CSS写出三角形、圆形、平行四边形、梯形
- 一个简单实用的css小技巧
- 用css制作一个三角形箭头
- 实用的利用 CSS + <em>标签 来完成一个三角形的制作
- Effective前端(3)用CSS画一个三角形
- CSS:在input、pre中左边加上一个图标(一行和多行)
- css:before实现三角形箭头小技巧
- 用css构建一个三角形
- 如何用CSS写一个三角形