<!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. redis 优化

    系统优化echo "vm.overcommit_memory=1" > /etc/sysctl.conf 0, 表示内核将检查是否有足够的可用内存供应用进程使用:如果有足够的 ...

  2. python 练习多级菜单思路

    只写了一个zj的三级菜单,后面的功能没写 #-*- coding :utf-8 -*- print """ 你可以输入省份然后根据市县输入 ""&qu ...

  3. Python开发之【简单计算器】

    开发一个简单的python计算器 1.实现加减乘除及括号优先级解析 2.用户输入 1 - 2 * ( (60-30 +(-40/5) * (9-2*5/3 + 7 /3*99/4*2998 +10 * ...

  4. Mac OS X 中vim开启配色和git补全

    问题起源:mac 下自带的git 无法补全命令,配色方案不完善 Mac OS Yosemite 10.10.3 git version 2.3.2 (Apple Git-55) 处理结果:git命令可 ...

  5. nginx 平滑升级tengine

    wget  http://tengine.taobao.org/download/tengine-1.5.1.tar.gz //下载Tengine1.5.1版本 tar zxvf tengine-1. ...

  6. cnblogs美化及插件

    1.vp计数 http://www.amazingcounters.com 2.来源地图 http://clustrmaps.com 2.1来源地图 http://www.flagcounter.co ...

  7. 对"构建之法“的理解和困惑

    对"构建之法"的理解和困惑        本人"学沫沫"一个,对于之前的编程学习虽不大"感冒",但秉着对自己负责的态度进行了基础学习.   ...

  8. div中的内容垂直居中的五种方法

    一.行高(line-height)法 如果要垂直居中的只有一行或几个文字,那它的制作最为简单,只要让文字的行高和容器的高度相同即可,比如: p { height:30px; line-height:3 ...

  9. YOU ARE MY SUNSHINE

    /*you are sunshine, my only sunshine, you make me happy when skies are grey. you'll never know dear ...

  10. AC日记——阶乘之和 洛谷 P1009（高精度）

    题目描述 用高精度计算出S=1!+2!+3!+…+n!(n≤50) 其中“!”表示阶乘,例如:5!=5*4*3*2*1. 输入输出格式 输入格式: 一个正整数N. 输出格式: 一个正整数S,表示计算结 ...