利用CSS3新特性创建透明边框三角

先来看一下效果，这在CSS3之前，完全是不可想象的，只有图片才能做的到，但在HTML5和CSS3大行其道的今天，实现这种效果，那都不是事啊。

看一下实现的代码：

<!DOCTYPE html>
<html>
<head>
<style type='text/css'>

/* 上三角 */
.arrow-up {
 width: 0;
 height: 0;
 border-left: 20px solid transparent;
 border-right: 20px solid transparent;
 border-bottom: 20px solid green;
}

/* 下三角 */
.arrow-down {
 width: 0;
 height: 0;
 border-left: 20px solid transparent;
 border-right: 20px solid transparent;
 border-top: 20px solid orange;
}

/* 右三角 */
.arrow-right {
 width: 0;
 height: 0;
 border-top: 60px solid transparent;
 border-bottom: 60px solid transparent;
 border-left: 60px solid blue;
}

/* 左三角 */
.arrow-left {
 width: 0;
 height: 0;
 border-top: 10px solid transparent;
 border-bottom: 10px solid transparent;
 border-right: 10px solid silver;
}
</style>
</head>
<body>
 <div class="arrow-up"></div>
 <div class="arrow-down"></div>
 <div class="arrow-left"></div>
 <div class="arrow-right"></div>
</body>
</html>
赞 (0)

相关推荐

  • 7款吸引人眼球的jQuery/CSS3特效实例分享

    7款吸引人眼球的jQuery/CSS3特效实例分享

    作为WEB前端开发者,jQuery和CSS3肯定用得也比较多,那么下面就分享一些由jQuery和CSS3制作成的特效,希望大家会喜欢. 1.基于jQuery和CSS3的圆盘抽奖 这个小程序可以让你在网站上轻松的添加一个抽奖应用,应用是基于jQuery和CSS3开发的,圆盘抽奖很好玩的哦,你抽中了什么? 在线演示 /源码下载 2.纯CSS3实现的点击发光按钮特效 这款按钮时基于纯CSS3实现的,当用户点击按钮的瞬间,按钮四周会发出淡淡的白光效果,是一款非常有特色的按钮. 在线演示 /源码下载 3.

  • CSS3实现3D文字动画效果

    body{background:#333;} h1{font:normal 90px/1.5 'Ultra','Curlz MT','Bauhaus 93','Blackoak Std',Courier,Arial;color:#7e9409;position:absolute;top:85px;left:10px;width:300px; -moz-animation: 1s slidein; -webkit-animation: 1s slidein; -webkit-perspective

  • CSS3实现动态背景登录框的代码

    CSS3实现动态背景登录框的代码

    基于CSS3动态背景登录框代码.这是一款基于jQuery+CSS3实现的带有动画效果的动态背景登陆框特效.效果图如下: 实现的代码如下: html代码: <div class="htmleaf-container"> <div class="wrapper"> <div class="container"> <h1>Welcome</h1> <form class="fo

  • Css3制作变形与动画效果

    Css3制作变形与动画效果

    下面通过图文并茂的方式给大家展示下css3制作变形与动画效果 css3制作动画的几个属性:变形(transform),过渡(transition)和动画(animation). 下面介绍:过渡transition. 一.例子 先通过一个例子感性认识一下transition的动画效果. 鼠标放上去,div宽度从100px增大到200px. <style type="text/css"> div{ width: 100px; height: 100px; background-

  • 基于Css3和JQuery实现打字机效果

    基于Css3和JQuery实现打字机效果

    先给大家附上效果图: 最近做项目的时候需要实现一个字符逐个出现的打字效果,用css的clip+css的动画实现的,与自己写的打字机效果相结合,整 理一起,效果很赞. 先来说说这个线条,我们会看到它是条,实际上就是个四周border有规律的显示隐藏,那么这里必定会想到after,before属性, 我们暂且先考虑after. 先建立一个box,然后after一个边框 <div class="box"></div> .box:before{ content: '';

  • 7款风格新颖的jQuery/CSS3菜单导航分享

    7款风格新颖的jQuery/CSS3菜单导航分享

    一款优秀的菜单对网站而言是非常重要的,它不仅可以让用户方便地找到想要的信息,而且更让人有一种特殊的用户体验.下面给大家分享7款风格新颖的jQuery/CSS3菜单导航,希望大家会喜欢. 1.CSS3立体飘带状菜单 CSS3立体飘带状菜单,该菜单鼠标滑过时,菜单项向上立体凸起,结合黑色的木质背景,整个菜单显得非常立体生动. 在线演示 /源码下载 2.CSS3个人资料导航菜单 该菜单是用来展示登录的用户信息,包括用户的快捷操作按钮,另外菜单还提供一个个性化的搜索框. 在线演示 /源码下载 3.jQu

  • 纯CSS3代码实现滑动开关效果

    纯CSS3代码实现滑动开关效果

    废话不多说了,炫下效果图并附上演示和源码下载. 实现效果如下: 查看演示      源码下载 HTML结构代码: CSS代码: /*表单开关样式*/ .ui-switch { position: absolute; font-size: .16rem; right:0.07rem; top: 50%; margin-top: -0.16rem; width: .7rem; height: .3rem; line-height: .3rem; } .ui-switch input { width:

  • 6款新颖的jQuery和CSS3进度条插件推荐

    6款新颖的jQuery和CSS3进度条插件推荐

    现在的网页功能越来越多,尤其是AJAX的广泛应用,进度条和Loading加载动画显得越来越重要了.下面给大家介绍几款比较新颖的jQuery和CSS3进度条Loading加载动画插件,希望对大家有帮助. 1.不同进度显示不同颜色的进度条 这款CSS3进度条和别的有所不同,他的主要特点是随着进度的变化,进度条的颜色会有所改变,这个和游戏中人物的生命值很相似. 2.纯CSS3实现的彩色进度条 该进度条利用了CSS3的颜色渐变属性,让进度条的色彩显得非常具有立体感. 3.jQuery Progress

  • 利用CSS3新特性创建透明边框三角

    利用CSS3新特性创建透明边框三角

    先来看一下效果,这在CSS3之前,完全是不可想象的,只有图片才能做的到,但在HTML5和CSS3大行其道的今天,实现这种效果,那都不是事啊. 看一下实现的代码: <!DOCTYPE html> <html> <head> <style type='text/css'> /* 上三角 */ .arrow-up { width: 0; height: 0; border-left: 20px solid transparent; border-right: 20

  • 深入理解Java8新特性之Stream API的创建方式和中间操作步骤

    深入理解Java8新特性之Stream API的创建方式和中间操作步骤

    目录 1.什么是StreamAPI? 2.Stream API操作的三个步骤 2.1 创建Stream 2.2 中间操作 2.2.1 中间操作之筛选与切片 2.2.2 中间操作之映射 2.2.3 中间操作之排序 1.什么是StreamAPI? Java8中有两大最为重要的改变.第一个是 Lambda 表达式:另外一个则是 m Stream API (java.util.stream.*) . Stream 是 Java8 中处理集合的关键抽象概念,它可以指定你希望对集合进行的操作,可以执行非常复

  • 深入Java7的一些新特性以及对脚本语言支持API的介绍

    1.switch条件语句中可以加入字符串了,实现方法是利用了字符串的hashcode()值作业真正的值2.增加了一种可以在字面量中使用的进制,二进制,通过在数字前面加"0b"或"0B"3.在数字字面量中使用下划线来分隔数字方便阅读,不影响数值大小.基本原则是前后都是数字的才可以出现下划线4.java7对异常做了两个改动: 4.1.支持在一个catch子句中同时捕获多个异常,另外一个是在捕获并重新抛出异常时的异常类型更加精确.java7中Throwable类增加add

  • Vue.js 2.5新特性介绍(推荐)

    Vue.js 2.5新特性介绍(推荐)

    TypeScript TypeScript是一种由微软开发的自由和开源的编程语言.它是JavaScript的一个超集,而且本质上向这个语言添加了可选的静态类型和基于类的面向对象编程.2012年十月份,微软发布了首个公开版本的TypeScript,在2013年6月19日,微软发布了TypeScript 0.9的正式版本,到目前为止,TypeScript已发展到2.x版本 安装TypeScript 安装TypeScript主要有两种方式: 通过npm方式安装(Node.js包管理器) 安装TypeS

  • DB2 9的九大新特性

    正在看的db2教程是:DB2 9的九大新特性. 这款新型数据服务器率先实现了可扩展标记语言(XML)和关系数据间无缝交互,而无需考虑数据的格式.平台或位置.来自8个国家的750多名软件开发人员为"Viper"的问世做出了努力,他们进行了精心设计和调试,力求将其打造成SOA环境下的首选信息引擎.? DB2 9取得了十项重大进步,包括已获得专利的"pureXML"技术.突破性的"Venom"存储压缩以及增强的自动化数据管理能力等. 1.新的XML特性

  • iOS开发之路--微博新特性页面

    BeyondAppDelegate.m // // BeyondAppDelegate.m // 20_帅哥no微博 // // Created by beyond on 14-8-3. // Copyright (c) 2014年 com.beyond. All rights reserved. // #import "BeyondAppDelegate.h" #import "BeyondViewController.h" #import "NewFe

  • Java 8 新特性终极版指南详解

    前言: Java 8已经公布有一段时间了,种种迹象表明Java 8是一个有重大改变的发行版.在Java Code Geeks上已经有很多介绍Java 8新特性的文章,例如Playing with Java 8 – Lambdas and Concurrency.Java 8 Date Time API Tutorial : LocalDateTime和Abstract Class Versus Interface in the JDK 8 Era.本文还参考了一些其他资料,例如:15 Must

  • Java8新特性之再见Permgen_动力节点Java学院整理

    Java8新特性之再见Permgen_动力节点Java学院整理

    很多开发者都在其系统中见过"java.lang.OutOfMemoryError: PermGen space"这一问题.这往往是由类加载器相关的内存泄漏以及新类加载器的创建导致的,通常出现于代码热部署时.相对于正式产品,该问题在开发机上出现的频率更高,在产品中最常见的"问题"是默认值太低了.常用的解决方法是将其设置为256MB或更高. PermGen space简单介绍 PermGen space的全称是Permanent Generation space,是指内

  • ASP.NET2.0新特性概述

    ASP.NET技术从1.0版本升级到1.1变化不是很大.然而,从ASP.NET 1.x升级到2.0,却不是件轻而易举的事情.ASP.NET 2.0技术增加了大量方便.实用的新特性.ASP.NET 2.0主要提供控件.页面框架.服务与APIs等3个方面的技术特性. 控件 在ASP.NET 1.x时代,由于内置服务器控件数量有限.功能覆盖面窄,因此,开发人员怨声载道.为了消除这个技术软肋,ASP.NET 2.0做出了突破性改进.在ASP.NET 2.0中,新增数十个服务器控件.根据控件功能特征,可分

  • ES6的新特性概览

    Nick Justice是GitHub开发者计划的一员.早在ES6语言标准发布之前,他就借助像Babel这样的转译器以及最新版本的浏览器在自己的项目中使用ES6特性.他认为,ES6的新特性将极大地改变JavaScript的编写方式. ES6(ECMAScript 6)是即将到来的新版本JavaScript语言的标准,代号harmony(和谐之意,显然没有跟上我国的步伐,我们已经进入中国梦版本了).上一次标准的制订还是2009年出台的ES5.目前ES6的标准化工作正在进行中,预计会在14年12月份

随机推荐