<!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. [国家集训队] Crash 的文明世界

    不错的树形$ DP$的题 可为什么我自带大常数啊$ cry$ 链接:here 题意:给定一棵$ n$个节点的树,边权为$ 1$,对于每个点$ x$求$ \sum\limits_{i=1}^n dist ...

  2. DeepLearning.ai-Week1-Convolution+model+-+Step+by+Step

    1 - Import Packages import numpy as np import h5py import math import matplotlib.pyplot as plt %matp ...

  3. Microsoft SQL - 指令

    exec指令 查询数据库详细状态 exec sp_helpdb 数据库名称 修改数据库名称 exec sp_rename oldname,new_name 查看表状态 exec sp_help 表名称 ...

  4. 微信小程序-用户拒绝授权使用 wx.openSetting({}) 重新调起授权用户信息

    场景模拟:用户进入微信小程序-程序调出授权 选择拒绝之后,需要用到用户授权才能正常使用的页面,就无法正常使用了. 解决方法:在用户选择拒绝之后,弹窗提示用户 拒绝授权之后无法使用,让用户重新授权(微信 ...

  5. 集合-HashMap

    该文章的实践内容来自how2java网站,集合的学习篇章 1.概念: HashMap是以哈希表作为底层数据结构,以一组键值对作为存储单元的Map接口的实现类. 其主要特点是,容器内的元素不以添加顺序排 ...

  6. openstack Q版部署-----虚拟机密码修改问题

    一.修改镜像密码 1.打开一个要修改的镜像 随便找一台centos服务器 [root@linux-node1 ~]#wget http://cloud.centos.org/centos/7/imag ...

  7. HDOJ 4267 A Simple Problem with Integers (线段树）

    题目: Problem Description Let A1, A2, ... , AN be N elements. You need to deal with two kinds of opera ...

  8. SharePoint 2010 安装错误：请重新启动计算机，然后运行安装程序以继续

    一．环境:Windows Server 2008 R2 with sp1,SharePoint 2010 二．问题描述: 正常的安装SharePoint 2010 ,安装完必备组件,并提示所有必备组件 ...

  9. localtime函数和strftime函数

    localtime函数 功能: 把从1970-1-1零点零分到当前时间系统所偏移的秒数时间转换为本地时间,而gmtime函数转换后的时间没有经过时区变换,是UTC时间 . 用法: #include & ...

  10. 重新配置ocr voting

    由于存储空间不足,下线的数据库需要把存储空间腾出来,关闭集群资源,主机工程师收回lun需要(包括ocr 和 voting data 磁盘组),新的应用需要上线需要新的数据库,新的hitach存储到位需 ...