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属性来实现这一效果，包括两种不同的方法。 ### 第一种写法：利用伪元素 `::before` 或 `::after` 在...
CSS Border 属性制作小三角 CSS Border 属性是 CSS 中一个非常重要的属性，它可以用来设置元素的边框样式。今天，我们将探讨如何使用 CSS Border 属性来制作小三角。 首先，让我们了解一下 Border 属性的基本用法...
这个“css小三角的做法与使用”主题深入探讨了如何仅通过CSS来创建各种形状的三角形，并且提供了文本文档和图解以帮助学习者理解。 首先，我们要了解CSS中如何创建三角形的基本原理。这是因为CSS边框不只可以是矩形...
之前写的三角形一直在同一个颜色，没有边框的样式。如下： CSS代码如下： .tri-up{width: 0;height:0;border-left:20px solid transparent;border-right: 20px solid transparent;border-bottom: 20px solid red; ...
标题中的“CSS学习 三角 border transparent 下拉框”是指在CSS样式设计中，如何利用边框(border)的透明属性创建三角形以及在下拉框(drop-down list)中应用这一技巧。在网页设计中，三角形通常用于指示箭头或方向，...
在CSS世界中，创造出各种形状是一项基本技能，而“用CSS写出三角形”是一个常见的需求，尤其是在构建下拉菜单、提示框或者箭头效果时。本文将深入探讨如何利用CSS来绘制三角形，并通过实际的代码示例进行解析。 ...
用DIV+CSS写小三角 * { margin: 0; padding: 0; font-size: 12px; font-family: Verdana, Arial; line-height: 1.8; list-style: none; } #info, #nav { margin: 50px; border: 1px dashed #f30; ...
/*如果想改变倒三角形的大小,就改变这里的像素值*/ border-style: solid; border-color: #666 #fff #fff #fff; /*如果倒三角形的父元素背景不是白色,就把后面三个#fff改为对应的背景色*/ top: 13px; left: 40px; /*...
"Tab下面画线并有效三角"的标题和描述指向的是一个关于如何在Tab组件下方添加动态下划线和切换时伴随的小三角形指示器的实现方法。这种设计通常用于指示当前选中的Tab项，提升用户体验。 Tab组件是UI设计中的一个...
比较简单实用的还是使用border来创建三角形，今天主要研究这个的实现将边框分别设置为红/黄/蓝/绿 CSS Code复制内容到剪贴板 .triangle { height: 0; width: 0; overflow: hidden; font-size: 0; ...
但是，有时我们也需要实现下拉列表的小三角形样式，例如日期选择器中的下拉列表。今天，我们将讨论如何使用 HTML、CSS 和 JavaScript 实现下拉列表的小三角形样式。 首先，让我们来看一下 HTML 代码： ```html <!...
这段代码会创建一个红色的向上的三角形，通过调整`border-left`、`border-right`和`border-bottom`的值，可以改变三角形的方向和大小。 2. 利用伪元素 有时我们可能需要更复杂的布局，如带有背景色的箭头。这时可以...
例如，要创建一个向上指向的三角形，只需改变`border-bottom`为`border-top`： ```css .triangle-up { width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; ...
复制代码代码如下: <... border-color: transparent #fff; border-style: solid; border-width: 8px 7px 8px 0px; margin: 4px 0px 0px 0px; } </style> </head> <body> <di
解决方法是创建一个更大的三角形，然后将小三角形放置在其之上，利用绝对定位。例如，我们可以创建一个蓝色的底边三角形，然后在其上方放置一个黄色的三角形： ```css #blue { position: relative; width: 0; ...