CSS 实用技巧:制作三角形
实现如图所示的三角形图标:
html代码如下:
<div class="arrow-up"></div>
<div class="arrow-down"></div>
<div class="arrow-left"></div>
<div class="arrow-right"></div>
css样式:
body{background:#faf7ef;}
div{margin:20px auto}
div.arrow-up {
width:0px;
height:0px;
border-left:50px solid transparent;
border-right:50px solid transparent;
border-bottom:50px solid #ff0000;
font-size:0px;
line-height:0px;
} div.arrow-down {
width:0px;
height:0px;
border-left:50px solid transparent;
border-right:50px solid transparent;
border-top:50px solid #0000ff;
font-size:0px;
line-height:0px;
} div.arrow-left {
width:0px;
height:0px;
border-bottom:50px solid transparent;
border-top:50px solid transparent;
border-right:50px solid #008000;
font-size:0px;
line-height:0px;
} div.arrow-right {
width:0px;
height:0px;
border-bottom:50px solid transparent;
border-top:50px solid transparent;
border-left:50px solid #ffff00;
font-size:0px;
line-height:0px;
}
实现箭头效果如下所示:
CSS代码:
.arrow{
display: inline-block;
border-top: 2px solid;
border-right: 2px solid;
width: 100px;
height: 100px;
border-color: #EA6000;
transform: rotate(-135deg);
margin: 50px auto auto 100px;
}
html代码:
<span class="arrow"></span>
CSS 实用技巧:制作三角形的更多相关文章
- CSS效果:CSS实用技巧制作三角形以及箭头效果
实现如图所示的三角形图标: html代码如下: <div class="arrow-up"></div> <div class="arrow ...
- 响应式设计的5个CSS实用技巧
正如我在教程响应式Web设计三步走当中所讲的,响应式的Web设计其实并不难,但是要让元素在布局切换时能够平滑过渡就比较考验技巧了.现在我分享在编码时常用的五个CSS技巧并举例说明.这些技巧都是使用简单 ...
- CSS实用技巧(中)
前言 我们经常使用CSS,但是却不怎么了解CSS,本文主要对vertical-align.BFC.position中开发过程不怎么注意的特性进行简要总结,从本文中,你将了解到以下内容: vertica ...
- 用css伪类制作三角形的三种方法
在手机上写三角形的时候,我一般都用伪类,刚开始的时候用的图片,但是在现在的手机高清屏幕上,图片容易失真,还是用伪类吧! 第一种:一个90度的“ > ”, 只有线条.(可以做下拉框的箭头之类的) ...
- CSS制作三角形和按钮
CSS制作三角形和按钮 用上一篇博文中关于边框样式的知识点,能制作出三角形和按钮. 我先说如何制作三角形吧,相信大家在平时逛网站的时候都会看到一些导航栏中的三角形吧,比如说: 网易首页的头部菜单栏中, ...
- CSS 制作三角形原理剖析
使用css制作三角形其实原理很简单,下面一步步解析. 1.html代码如下 <div class="triangle"> </div> 2.CSS代码 .t ...
- 用css制作三角形
用css制作三角形,主要是利用css元素给“盒模型”设置边框得到的. 上图,上边框和做边框,以及上边框和右边框的交合处,浏览器会按照直角的二分之一处绘制交合线.这是“盒模型”有宽和高时候的效果.我们假 ...
- 《CSS动画实用技巧》课程笔记
概述 这是我学习[CSS动画实用技巧][1]的课程笔记 常用动画属性--transition [常用动画属性--transition][2] .change img{ display:block; w ...
- css制作tips提示框,气泡框,制作三角形
有时候我们的页面会需要这样的一些提示框或者叫气泡框,运用css,我们可以实现这样的效果. 为了实现上面的效果,我们首先要理解如何制作三角形. 当我们给一个DIV不同颜色的边框的时候,我们可以得到下面的 ...
随机推荐
- 配置VS代码生成工具ReSharper快捷键
VS代码生成工具ReSharper提供了丰富的快捷键,可以极大地提高你的开发效率.安装ReSharper后首次启动Visual Studio时,会出现一个名为ReSharper Keyboard Sc ...
- art-template引擎模板
art-template简介 artTemplate(后文简称aT)才是模板引擎,而TmodJS(后文简称TJ,曾用名atc)则是依赖于前者的一款模板预编译器.两者都是由腾讯开发.其实aT完全可以独立 ...
- 为网站添加ico图标
1.将目标图片装换为.ico格式 在线转换工具:http://www.bitbug.net/ 2.将装换后的图标放入项目文件中,一般命名为favicon 3.在项目文件的index页面中引入 < ...
- linux服务器如何设置目录权限,让开发只能在测试目录下开发,不在线上目录上开发
当一台服务器上,既有测试环境,也有生成的环境,开发需要在线上测试,如果开发生产环境的权限,那开发容易误操作 需求如下: (1)生产环境的代码,必须有专用的账号登陆进行管理 (2)开发测试环境的代码,开 ...
- 一些C语言学习的国外资源
下面的列表是在网上收集整理的C语言资料,包括PDF等多种格式 A Tutorial on Pointers and Arrays in C Beej's Guide to C Programming ...
- 【读书笔记】iOS-开发技巧-三种收起键盘的方法
- (void)viewDidLoad { [super viewDidLoad]; // Do any additional setup after loading the view, typica ...
- 全球最低功耗蓝牙单芯片DA14580的软件体系 -层次架构和BLE消息事件处理过程
在作者之前发表的<全球最低功耗蓝牙单芯片DA14580的系统架构和应用开发框架分析>.<全球最低功耗蓝牙单芯片DA14580的硬件架构和低功耗>.<全球最低功耗蓝牙单芯片 ...
- Enterprise Library +Caliburn.Micro+WPF CM框架下使用企业库验证,验证某一个属性,整个页面的文本框都变红的原因
我用的是CM这个框架做的WPF,在用企业库的验证的时候,我用标签的方式给一个属性加了不能为空的验证,但整个页面的所有控件的外面框都变红了.原因是CM框架的绑定方式是直接X:Name="你的属 ...
- Mac上的软件的一些对开发者有用的使用技巧(持续更新)
内容大纲: Google浏览器设置开发者模式 正文: 1.Google浏览器设置开发者模式
- Cocos2d入门--1--初涉相关属性或代码
Cocos2d vision: cocos2d-x-3.8.1 万丈高楼,起于累土.对于一个游戏框架的学习,其实在于框架功能的使用积累,学会了如何在cocos2d游戏引擎的基础上使用它提供的各种功能 ...