css3制作梯形,css3实现梯形三角

近期移动端项目中，图片很多

移动端尽量少图片，以便提升加载速度！这时候css3可以大放光芒

比如梯形的背景图

---------------------------------

-----------------------------------------------

2个标签即可实现梯形背景

----------------html----------------------

标题

-----------------css------------------------

.box {

border-bottom: 1px solid orange;

margin-bottom: 100px;

}

.box span {

display: inline-block;

padding: 10px 20px;

background: orange;

color: #fff;

width: 20%;

position: relative;

}

.box span:after{

content: '';

display: inline-block;

width: 30px;

position: absolute;

top: 0;

bottom: 0;

-webkit-transform: skew(30deg);

transform: skew(30deg);

background: orange;

right: -15px;

}

多谢@大漠 ,@lxzhi @一万等专家指点,css3才得以实现

下载链接:http://files.cnblogs.com/files/leshao/css3%E5%AE%9E%E7%8E%B0%E6%A2%AF%E5%BD%A2%E4%B8%89%E8%A7%92.rar

css3旋转小三角

首页

CSS3 linear-gradient线性渐变实现虚线等简单实用图形

一.作为图片存在的CSS3 gradient渐变我觉得CSS3 Backgrounds比较厉害的一个地方就是支持多背景,也就是背景图片个数可以无限累加,正好CSS3的gradient渐变性质是bac ...

css3画图那些事(三角形、圆形、梯形等)

闲来无事,写写图形.当时巩固一下css3吧..前端小白,写的不好还请前辈多指教. 三角形 { width:; height:; border-bottom: 140px solid red ; bor ...

【学】CSS3基础实例1 - 用CSS3做网页中的小三角，以及transition的用法

自开了博客园已经有2周了吧,虽然转载了一些觉得比较有用的文章之外还没有开始写自己的一些学习记录,那就从今天开始. 目前看了妙味的不少视频,有css+html,js的基础和中级也都看完了,作业也都做了, ...

CSS3 &commat;font-face实现颜色大小可控的三角效果——张鑫旭

一.我之前介绍过的三角实现效果回顾这里所说的三角效果之等腰直角三角形效果(等边三角形有现成字符实现,没什么好说的:还有图片实现三角众人皆知,不予以说明): 1. 字符实现三角效果关于字符实现三角我早 ...

css3 小三角的用法

css3制作梯形,css3实现梯形三角相关推荐

css3制作手风琴,CSS3制作手风琴——CSS3 :target的应用
前一回我在<CSS3制作垂直手风琴>介绍了使用":hover"来制作手风琴效果.今天,你将学习使用CSS3的另一个属性--:target来制作一个非常简单的动画手风琴的 ...
css3制作手风琴,CSS3实现可关闭的下拉手风琴菜单效果
本文实例讲述了CSS3实现可关闭的下拉手风琴菜单效果.分享给大家供大家参考.具体如下: CSS3菜单实例,运用纯CSS3技术实现一款下拉手风琴菜单功能,其实不能说是关闭,应该来说是折叠或收缩了,点击菜 ...
css3 制作阳光,CSS3 制作 Loading 动画
虽然现在互联网的网速越来越快,但永远都跟不上我们生活节奏的加快.资深网瘾少女表示,这世上最刺眼的不是阳光,而是" 正在加载":最长的不是周杰伦的电影,而是" 正在加载&q ...
css3 制作阳光,CSS3 散射的阳光动画背景
CSS 语言: CSSSCSS 确定 html, body { width: 100%; height: 100%; } html { background-color: #e76027; overf ...
使用CSS3制作倾斜导航条和毛玻璃效果
导航条对于每一个Web前端攻城狮来说并不陌生,但是毛玻璃可能会相对陌生一些.简单的说,毛玻璃其实就是让图片或者背景使用相应的方法进行模糊处理.这种效果对用户来说是十分具有视觉冲击力的. 本次分享的主题 ...
纵向手风琴html,CSS3制作垂直手风琴
说起手风琴的制作,大家肯定首选就是使用jQuery来制作,我在<如何使用jQuery制作手风琴效果>也简单的介绍了使用jQuery制作手风琴效果.但今天我在Saud Khan的<Cr ...
纯CSS3制作卡通场景汽车动画效果
前言今天分享一下我昨晚做的CSS3动画效果--卡通场景汽车动画.在接触CSS3动画之前,我之前实现一些简单的动画效果都是使用flash完成的.但是自从CSS3横空出世,在移动端对CSS3动画的运用越 ...
纯CSS3制作的圆角效果按钮菜单
<!DOCTYPE html> <head> <meta http-equiv="Content-Type" content="text/h ...
用CSS3制作很特别的波浪形菜单
用CSS3制作很特别的波浪形菜单原文:用CSS3制作很特别的波浪形菜单网页菜单我们见过很多,各种炫酷的.实用的菜单比比皆是.昨天我看到一款很特别的CSS3菜单,它的外形是波浪形的,弯弯曲曲,结合背 ...
css3制作左右拉伸动画菜单
微博上看到这样一篇文章(http://js.itivy.com/?p=495),用jquery和css3制作左右拉伸动画菜单,看了下实现效果(http://js.itivy.com/jiaoben96 ...

css3制作梯形,css3实现梯形三角

css3制作梯形,css3实现梯形三角相关推荐

最新文章

热门文章