<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>CSS使用border制作梯形</title>
  <style>
    .tixing{
        width:200px;
        border-bottom:200px solid red;
        border-left:50px solid transparent;/*transparent透明色*/
        border-right:50px solid transparent;
    }
  </style>
 </head>
 <body>
  <div class='tixing'>
  </div>
 </body>
</html>

border画梯形的更多相关文章

  1. 用CSS的border画三角形

    用border画三角形,实际上属于一种奇淫巧技. 利用的是border的一个特性:当一个元素的宽高都为0时,给border设置宽度(至少给2个相邻的边框设置宽度),border就会撑开这个元素. 四个 ...

  2. css中border画三角形

    <!doctype html><html lang="en"> <head>  <meta charset="UTF-8&quo ...

  3. html border画三角形

    最近遇到了问题就是画推进条类似于

  4. 【前端小技巧】利用border画三角形及梯形

    border是围绕元素内容和内边距的一条或多条线,border 属性允许你规定元素边框的样式.宽度和颜色 值: border-width 粗细 none/hidden/solid/dashed/dot ...

  5. CSS深入了解border：利用border画三角形等图形

    三角形实际上是border的产物 我们正常使用的border都是四边一个颜色,当我们把四边换上不同颜色 那么你就会发现,三角来了~! <!DOCTYPE html> <html la ...

  6. 利用Border画三角形

    边框 1.边框其实并不是矩形,而是梯形 2.利用边框画三角形: div.a{ width:0px; height:0px; border:10px white solid; border-top-co ...

  7. illustrator画梯形

    1.在空白文档上先绘制出一个长方形: 2.用鼠标点击工具箱中”自由变换“工具: 3.用鼠标指向长方形四个顶点中的任意一个,当鼠标的箭头变为相反反方向的双箭头时,再按住鼠标左键不要松手, 同时按住[sh ...

  8. 原来css中的border还可以这样玩

    原来css中的border还可以这样玩 前面的话: 在看这篇文章之前你可能会觉得border只是简单的绘制边框,看了这篇文章,我相信你也会跟我一样说一句"我靠,原来css中的border还可 ...

  9. 纯css来画图-border应用

    基础知识: Css画图大部分是使用了css中的border来绘画图形,那首先我们就来看下border的基础知识,至于其他的遇到了再讲吧! Border的基础知识: 一般我们这样简写: border: ...

随机推荐

  1. Linux调试

    参考文章: http://mp.weixin.qq.com/s/Kz4tii8O4Nk-S4SV4kFYPA 各类调试工具: 参考链接:  http://www.brendangregg.com/li ...

  2. 深入理解 RPC

    学习资料 https://juejin.im/book/5af56a3c518825426642e004

  3. zabbix系列 ~ linux监控相关

    Linux 监控 一 相关名词解释    cpu context switch (上下文切换)   1 定义 CPU给每个任务一定的服务时间,当时间片轮转的时候,需要把当前状态保存下来,同时加载下一个 ...

  4. c/C++编译的程序占用的内存分为以下几个部分

    首先要搞清楚编译程序占用的内存的分区形式:一.预备知识—程序的内存分配一个由c/C++编译的程序占用的内存分为以下几个部分1.栈区(stack)—由编译器自动分配释放,存放函数的参数值,局部变量的值等 ...

  5. yum upgrade和yum update的区别

    Linux升级命令有两个分别是yum upgrade和yum update, 这个两个命令是有区别的: yum -y update 升级所有包同时也升级软件.系统版本和系统内核 yum -y upgr ...

  6. SpringSecurity个性化用户认证流程

    ⒈自定义登录页面 package cn.coreqi.security.config; import org.springframework.context.annotation.Bean; impo ...

  7. 【转】HTTP

    [转]HTTP 一.http概述 超文本传输协议(HTTP,HyperText Transfer Protocol)是互联网上应用最为广泛的一种网络协议.所有的WWW文件都必须遵守这个标准.设计HTT ...

  8. Linux查看压缩文件内容【转】

    查看一个归档或者压缩文件的内容而无需解压它 得益于 Linux 社区,有很多命令行工具可以来达成上面的目标.下面就让我们来看看使用它们的一些示例. 1.使用 vim 编辑器 vim 不只是一个编辑器, ...

  9. for循环查找元素怎么跳出for循环

    应用场景: 当我们通过for循环来循环对象或者数组时,当找到符合条件的数据时,想要跳出这个循环,不在执行循环继续往后面查找. 解决方法: for循环里面使用return没有效果,于是,我们回到最初控制 ...

  10. ios webview调试

    chrome://inspect/#devices if (Build.VERSION.SDK_INT >=Build.VERSION_CODES.KITKAT) { WebView.setWe ...