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 @font-face实现颜色大小可控的三角效果——张鑫旭

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

css3 小三角的用法