<!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 Form 表单提交插件-----ajaxForm() 的应用

    Form Plugin API 里提供了很多有用的方法可以让你轻松的处理表单里的数据和表单的提交过程. 测试环境:部署到Tomcat中的web项目. 一.ajaxForm() 介绍  ajaxForm ...

  2. 设计模式C#实现(五)——抽象工厂模式

    抽象工厂模式 意图:提供一个创建一系列相关或相互依赖对象的接口,而无需指定他们具体的类. UML类图: 场景:抽象村商店想销售Pizza和Hamburg等多种商品,而在美国店和中国店要出售本土化的口味 ...

  3. android怎么连接sqlite数据库？

    SQLite数据库首先先建立SQLiteOpenHelper()的子类实现SQLiteOpenHelper中的OnCreate()方法和构造方法. this class takes care of o ...

  4. Android中解析XML

    XML在各种开发中都广泛应用,Android也不例外.作为承载数据的一个重要角色,如何读写XML成为Android开发中一项重要的技能.今天就由我向大家介绍一下在Android平台下几种常见的XML解 ...

  5. linux64位android项目R文件无法生成以及Cannot run program adb

    1.本机kali2.0  64位,kali基于Debian. 2.android adb是32位,64位linux要安装32位依赖库,注意ia32-lib被lib32z1替代. 3.执行命令 sudo ...

  6. beeline vs hive cli

    近期,大数据开发环境升级为cloudera 5.3. 配套的hive版本升级为0.13.1.可以使用心仪已久的分析开窗函数了.但在使用的过程中发现一些问题,仅记于此. 1.在使用hive命令的时候,发 ...

  7. java poi read write xlsx

    package myjava; import java.io.File; import java.io.FileInputStream; import java.io.FileNotFoundExce ...

  8. Web安全--XSS模版

    [XSS基本探测pyload]   <script>alert("xss")</script> <script>alert(/xss/)< ...

  9. NOIP2010普及组 三国游戏 -SilverN

    #include<iostream> #include<cstdio> #include<algorithm> #include<cmath> usin ...

  10. JMeter学习参数化User Defined Variables与User Parameters

    偶然发现JMeter中有两个元件(User Defined Variables与User Parameters)很相近,刚开始时我也没注意,两者有什么不同.使用时却发现两者使用场景有些不同,现在小结一 ...