小三角的做法与使用

用DIV+CSS可以作出很多不同形状的角形;以下我只写了几个;CSS没有优化;是为了让大家看得更清一些;

以下是一些小三角的形状:

这是第一个小三角的写法:


复制代码 代码如下:

#com_a{ border-top:10px solid #FFFFCC;border-left:10px solid #FF3300;border-bottom:10px solid #FFFFCC;}

以下是一些小三角;可以举一反三;做出更多的;

www.zishu.cn

/*zishu.cn*/
*{ 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 #FF3300; background:#FFFFCC; padding:50px;}
#info div{background:#FF0000; width:0px; height:0px; overflow:hidden; margin-bottom:10px;}
/*一些三角的写法*/
#com_a{ border-top:10px solid #FFFFCC;border-left:10px solid #FF3300;border-bottom:10px solid #FFFFCC;}
#com_b{ border-top:10px solid #FFFFCC;border-right:10px solid #FF3300;border-bottom:10px solid #FFFFCC;}
#com_c{ border-top:10px solid #FFFFCC;border-right:10px solid #FF3300;border-bottom:10px solid #FFFFCC;border-left:10px solid #FF3300;}
#com_d{ border-top:10px solid #FF3300;border-right:10px solid #FFFFCC;border-bottom:10px solid #FF3300;border-left:10px solid #FFFFCC;}
#com_e{ border-top:10px solid #FFFFCC;border-left:10px solid #FF3300;}
#com_f{ border-top:10px solid #FF3300;border-right:10px solid #FFFFCC;border-left:10px solid #FFFFCC;}
#com_g{ border-right:10px solid #FFFFCC;border-bottom:10px solid #FF3300;border-left:10px solid #FFFFCC;}
#com_h{ border-top:10px solid #FF3300;border-bottom:10px solid #FF3300;border-left:10px solid #FFFFCC;}
#com_i{ border-top:10px solid #FF3300;border-right:10px solid #FF3300;border-bottom:10px solid #FF3300;border-left:10px solid #FFFFCC;}

一些三角形的写法

[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

以下是一个应用的实例:

www.zishu.cn

/*zishu.cn*/
*{ margin:0; padding:0; font-size:12px; font-family:Verdana, "宋体", Arial; line-height:1.8; list-style:none;}
#nav{ margin:50px; border:1px dashed #FF3300; background:#FFFFCC; padding:50px;}
a:link,a:visited{color:#FF6600;text-decoration: none;}
a:hover,a:active{ color:#FF0000;}
#nav a span{overflow:hidden; border-top:6px solid #FFFFCC;border-left:6px solid #FFFFCC;border-bottom:6px solid #FFFFCC; height:0px; width:0px; margin:2px 2px 0 -10px; position:absolute}
#nav a:hover span{background:#CC3300;border-top:6px solid #FFFFCC;border-left:6px solid #FF3300;border-bottom:6px solid #FFFFCC;overflow:hidden; float:left;}

应用的一个实例

[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

在IE6和IE7还有FIREFOX还有OPERA都测试过!IE6更低的版本没有测试!

时间: 2006-11-01

select自定义小三角样式代码(实用总结)

这段代码是网上大部分的解决办法,在这里总结一下: 让select透明,上面加一个span,来替换select框,可以自定义小三角样式,也可以做出select文字居中的效果. <div class="ui-select"> <span>使用加息券或现金券 <i class="icon-down lMar10"></i></span> <select name="" id="

JS+CSS实现带小三角指引的滑动门效果

本文实例讲述了JS+CSS实现带小三角指引的滑动门效果.分享给大家供大家参考.具体如下: 这是一款JS+CSS带小三角指引的滑动门,有朋友说在IE6下看不到效果,其实能看到,因为那个小三角颜色比较淡,有时候因显示器的原因看不太清,其实这个颜色是自己可以控制的,改一下就行了,带三角指引后,使整个滑动门的结构更清淅,导向性更合理. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-css-sj-move-menu-style-codes/ 具体代

用DIV+CSS写小三角

test /*test*/ *{ 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; background:#ffc; padding:50px;} #info div{background:#f00; width:0px; height:0px; ov

使用UItableview在iOS应用开发中实现好友列表功能

基本实现 一.项目结构和plist文件 二.实现代码 1.说明: 主控制器直接继承UITableViewController 复制代码 代码如下: //  YYViewController.h //  02-QQ好友列表(基本数据的加载) // //  Created by apple on 14-5-31. //  Copyright (c) 2014年 itcase. All rights reserved. // #import <UIKit/UIKit.h> @interface YY

vue和react等项目中更简单的实现展开收起更多等效果示例

前言 本文题目中虽然写有vue和react,但是并非vue和react相关知识,而是最基本的html5和css3的一些知识,之所以写vue,是因为我最近项目中用到了类似效果,我用vue相关知识实现并不雅观,用html5和css3实现,则更加完美. 项目案例 项目中有如下效果: 好多展开收起,对于这个的实现,我一开始用了vue一些比较挫的dom操作,就是父元素toggleClass一个类名,进行子元素的显示和隐藏. 由于这个方法是通用方法,项目中好多地方使用,代码大概如下: toggleShow(

PyCharm 配置远程python解释器和在本地修改服务器代码

最近在学习机器学习的过程中,常常需要将本地写的代码传到GPU服务器中,然后在服务器上运行.之前的做法一直是先在本地写好代码,然后通过FileZilla这样的文件传输工具来将写好的文件传到服务器,再通过ssh工具远程连接到服务器,执行相应的python脚本.这样的方式十分繁琐,效率很低.今天听到朋友提到了配置远程解释器 使用场景 先说说自己的使用场景,我是在什么情况下,需要将IDE配置成这样的环境来方便我的工作. 首先,我需要在本地机子上写python代码,但是因为是机器学习相关的一些代码,有时候

在 Windows 下搭建高效的 django 开发环境的详细教程

从初学 django 到现在(记得那时最新版本是 1.8,本文发布时已经发展到 3.1 了),开发环境一直都是使用从官方文档或者别的教程中学来的方式搭建的.但是在实际项目的开发中,越来越感觉之前的开发环境难以适应项目的发展.官方文档或一些教程中的环境搭建方式主要存在这些问题: python manage.py runserver 启动的开发服务器热重载非常慢,尤其是当项目中导入了大量模块时,有时候改一次代码要等几秒钟才能完成重载. 主力开发环境为 Windows + PyCharm,然而有时候依

使用css实现全兼容tooltip提示框

最终效果图: 基本原理 先设定一个背景色的普通div盒子,然后使用上篇post得到的三角型图标,把div盒子设置为相对定位模式,三角型图标设置为绝对定位,位置相对于div盒子,调整到合适的位置.这样就得到一个基本的tooltip,但是没有边框看起来总是不舒服,我们可以给div盒子设置一个边框,这没什么难度,但是三角形图标如何设置边框呢?这里我们通过一个取巧的方式,让两个不同颜色的三角形图标叠加,并且位置错开1px,这样底层三角形top border被遮盖,只露出左右border部分,叠加在一起我

AngularJS实现按钮提示与点击变色效果

本文用angularJS简单实现了一个小的按钮提示,按钮点击后会变色,注意html文件中需要引入jquery.js和angular.js 运行截图: 当点击按钮的时候 按钮的样式改变: css代码: <style type="text/css"> *{margin: 0px;padding: 0px;} .bucSelectedButton{width: 100px;line-height: 30px;text-align: center;position: relativ