<!DOCTYPE html><html>

<head>

<meta charset="UTF-8">

<title>Document</title>

<style type="text/css">

.trapezoid{ border-bottom: 100px solid red; border-left: 50px solid transparent; border-right: 50px solid transparent;            width: 100px;        }    </style></head>

<body>    <div class='trapezoid'></div></body></html>

css写一个梯形的更多相关文章

  1. 还在为小三角形切图？使用纯CSS写一个简单的三角形

    同学们,当美工给的设计图是这样: 或者这样: 我的内心其实是拒绝的-_-:但工作还得干,大部分同学会写 <style> .icon{width:20px;height:20px;displ ...

  2. 玩玩CSS,写一个图标堆叠效果

    遇到有人问如下效果怎么写,一时兴起,自己写一个玩玩. 看到这个样子,首先应该考虑一下 DOM 结构,以我的观点,把DOM结构设计为如下形式: <div> <img src=" ...

  3. CSS写一个圣诞树Chrome浏览器小插件

    一时兴起,突然想写一个Chrome浏览器插件,不知道写啥,就写了一个圣诞树小插件.项目源码>> Chrome浏览器插件 Chrome浏览器插件最主要的是:index.html.manife ...

  4. 纯css写一个大太阳的天气图标

    效果 效果图如下 ​ 实现思路 div实现太阳的一条矩形光影 before伪元素制作另一条光影矩形,和已有的转变90° after伪元素画个圆实现太阳样式 dom结构 用两个嵌套的div容器,父容器来 ...

  5. 如何用css写一个带斜切角、有边框又有内外阴影的按钮呢？

    如果有一天,UI设计师丢过来一张UI稿,上面有这样一个带有斜切角.有边框还有内外阴影的按钮,你会怎么实现呢?第一反应切图?可是按钮内容.大小都是可变的,那得切多少图啊~Canvas?SVG?No,no ...

  6. Java-Web 用html和css写一个EasyMall注册界面

    要求: html代码: <!DOCTYPE html> <html> <head> <title>EasyMall注册页面</title> ...

  7. css 写一个向右的箭头

    经常写移动端页面时会用到向右的箭头,之前都是用图片,突然想到用css应该也能写,于是一搜还确实有 width: 7px; height: 7px; border-top: 2px solid #fff ...

  8. 用html和css写一个头部header和左侧菜单栏menu-bar固定的的页面

    这个页面header部分是100%的宽度,60px的高度,左侧是刚好一屏的高度,180的宽度,右侧的部分把剩余的空间占满,刚开始的时候还没怎么接触这样的页面,以为使用js读取浏览的可视化宽高,然后在做 ...

  9. 用html，CSS 写一个静态的博客网页

    <!doctype html> <html> <br/><br/><br/> <head> <meta http-equi ...

随机推荐

  1. jQuery 常用的代码片段

    1.  官网下载链接: http://jquery.com/download/ 2.  引入jquery 文件方式: (1) <script src="http://libs.baid ...

  2. 设计模式C#实现(七)——生成器模式

    生成器模式:将一个复杂对象的构建与它的表示分离,使得同样的构建过程可以创建不同的表示. UML类图: 构成: 1.Builder(接口/抽象类)定义了创建一个产品Product的各个部件的方法,返回创 ...

  3. django模型

    用django时,只要用到数据库就得用到模型. 一.数据库的MTV开发模式 从MVC到MTV 所谓软件架构的MVC模式将数据的存取逻辑(Module),表现逻辑(View)和业务逻辑(Controll ...

  4. codeforces 711A A. Bus to Udayland(水题)

    题目链接: A. Bus to Udayland 题意: 找一对空位坐下来,水; 思路: AC代码: #include <iostream> #include <cstdio> ...

  5. POJ 2407 Relatives 【欧拉函数】

    裸欧拉函数. #include<stdio.h> #include<string.h> ; int p[N],pr[N],cnt; void init(){ ;i<N;i ...

  6. Linux+Mono+Asp.net入门：05CentOs安装Mono（上）

    http://www.cnblogs.com/jameszou/archive/2013/05/18/3085754.html 准备工作 常见问题 a. Xshell显示中文乱码问题 [文件]–> ...

  7. QTP学习一添加默认的注释及调用外部vbs文件

    一.添加默认注释 1.新建一个TXT文档,将要添加的注释写在文档中 2.再将文档名改为:ActionTemplate.mst 3.将文件放到QTP安装目录(默认为:C:\Program Files\H ...

  8. 程序清单8-3 8-4 演示不同的exit值

    //http://blog.chinaunix.net/uid-24549279-id-71355.html /* ========================================== ...

  9. 如何等到所有的图片都加载完成之后触发一次onload事件

    var details_img = $(".details img"); //所有的图片 var img_len = details_img.length; details_img ...

  10. 谷歌验证 (Google Authenticator) 的实现原理是什么？

    著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明出处.作者:徐小花链接:http://www.zhihu.com/question/20462696/answer/18731073来源: ...