border 写的小三角
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
＊{ margin:0; padding:0;}
body{ background:#ccc;}
.less{ border-style:solid dashed dashed dashed; border-color:red transparent transparent transparent; border-width:10px 10px 0 10px;}
.more{ border-style:dashed dashed solid dashed; border-color: transparent transparent red transparent; border-width:0 10px 10px 10px;}/* dashed 边框透明 */
a{ display:inline-block; position:relative; height:0; overflow:hidden; vertical-align:middle;}/* height:0;解决i.e.下显示高度问题 */
.block{ width:200px; height:60px; line-height:60px; text-align:center; background:green; overflow:hidden; vertical-align:middle;}
</style>
</head>
<body>
<div class="block">
<a href="" class="less"></a>
</div>
<br />
<div class="block">
<a href="" class="more"></a>
</div>
</body>
</html>
http://blog.csdn.net/fedawn/article/details/7565951
分享到：
相关推荐
css border三角形
本篇文章主要介绍了CSS3 用border写 空心三角箭头 (两种写法)，非常具有实用价值，需要的朋友可以参考下
CSS Border属性制作小三角,需要的朋友可以参考下。
之前写的三角形一直在同一个颜色，没有边框的样式。如下： CSS代码如下： .tri-up{width: 0;height:0;border-left:20px solid transparent;border-right: 20px solid transparent;border-bottom: 20px solid red; ...
/*如果想改变倒三角形的大小,就改变这里的像素值*/ border-style: solid; border-color: #666 #fff #fff #fff; /*如果倒三角形的父元素背景不是白色,就把后面三个#fff改为对应的背景色*/ top: 13px; left: 40px; /*...
比较简单实用的还是使用border来创建三角形，今天主要研究这个的实现将边框分别设置为红/黄/蓝/绿 CSS Code复制内容到剪贴板 .triangle { height: 0; width: 0; overflow: hidden; font-size: 0; ...
NULL 博文链接：https://dodomail.iteye.com/blog/1701776
复制代码代码如下: <... border-color: transparent #fff; border-style: solid; border-width: 8px 7px 8px 0px; margin: 4px 0px 0px 0px; } </style> </head> <body> <di
1. 实现一个简单的三角形 ...这是我们平常使用border最普遍的情况——往往只给border一个较小的宽度（通常为1-2px）；然而这样的日常用法就会容易让大家对border的形成方式产生 误解 ，即认为元素的bo
利用这个特点, 通过设置不同的上下左右边框宽度或者颜色可以得到小三角, 小梯形等. – 调整宽度大小可以调节三角形形状. 示例1 一般情况下, 我们设置盒子的宽高度, 及上下左右边框, 会呈现如下图 #test1 { ...
利用CSS的border属性可以生成一些图形，例如三角或是圆角。纯粹的CSS2的内容，没有兼容性的问题，我之前在纯CSS实现各类气球泡泡对话框效果一文中算是比较详细的讲述了CSS border属性生成三角的原理，以及实例。我...
上一篇文章是用HTML特殊字符来制作三角的，今天介绍下，如何用 border 来制作三角，相对于用 border 来做三角，我更加喜欢用 html 特殊字符来制作三角，感兴趣的朋友可以参考下哈
利用 border 来实现2个三角形 将三角形叠在一起，实现一个类似的效果。 这是一种不错的方案。我现在小三角形的时候，也喜欢用这种方法。 二、终极方案 CSS3 是经常被提起，但在桌面端又很少被用到的内容。像 Alice ...
在众多的网页效果中，都有小三角形效果的应用，能够增加特定应用的美观度，下面就给出一段实例代码，里面介绍了两种实现小三角头效果的方式。代码如下： CSS Code复制内容到剪贴板 <!DOCTYPE html> <...
相信很多人都用过利用border来实现小三角箭头，百度一下，这类的文章多如牛毛，这里我还是啰嗦点把常用的方法陈列出来： CSS Code复制内容到剪贴板 .triangle_border_up{ width:0; height:0; border-width:0...