<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>div左右倾斜</title>
<style>
.div1
{
border:1px solid #FF0000;
transform:rotate(-9deg);
-ms-transform:rotate(-9deg);
-moz-transform:rotate(-9deg);
-webkit-transform:rotate(-9deg);
-o-transform:rotate(-9deg);
}
.div2
{
margin:30px;
width:200px;
height:200px;
background-color:yellow;
/* Rotate div */
transform:rotate(45deg);
-ms-transform:rotate(45deg); /* Internet Explorer */
-moz-transform:rotate(45deg); /* Firefox */
-webkit-transform:rotate(45deg); /* Safari 和 Chrome */
-o-transform:rotate(45deg); /* Opera */
}

</style>

</head>

<body>

//向左倾斜9度
<div class="div1" style="width:200px;height:200px;">

</div>

//向右倾斜45度
<div class="div2"></div>
</body>

如何使div左右倾斜的更多相关文章

  1. CSS 如何使DIV层水平居中

    今天用CSS碰到个很棘手的问题,DIV本身没有定义自己居中的属性, 网上很多的方法都是介绍用上级的text-align: center然后嵌套一层DIV来解决问题. 可是事实上这样的方法科学吗? 经过 ...

  2. 使 div 元素看上去像一个按钮

    使 div 元素看上去像一个按钮 div { appearance:button; -moz-appearance:button; /* Firefox */ -webkit-appearance:b ...

  3. Html 使用技巧 -- 设置display属性可以使div隐藏后释放占用的页面空间

         div的visibility可以控制div的显示和隐藏,但是隐藏后页面显示空白: style="visibility: none;" document.getElemen ...

  4. 使DIV相对窗口大小左右拖动始终水平居中

    <!doctype html> <html> <head> <meta http-equiv="content-type" content ...

  5. jQuery改变CSS使DIV显示

    HTML: <div id="mazey" style="display:none;">www.mazey.net</div> jQue ...

  6. css使div居中

    每次想要使div居中都会设置position:absolute;,发现设置其他控件位置时会出现问题,所以采用以下办法: margin:0 auto;

  7. js控制使div自动适应居中

    一直都在想怎么样使弹出的DIV能在任何时候都是居中显示的,刚开始的时候是用CSS样式直接定义好层的位置,但是当页面很长的时候,或是浏览器窗口大小不是固定的时候就不能正确的显示,所以只好用JS来控制DI ...

  8. js控制div滚动条，滚动滚动条使div中的元素可见并居中

    1.html代码如下 <div id="panel"> <div id="div1"></div> <div id=& ...

  9. 使div下的图片自适应div的大小

    div img{ max-width:100%; height:auto; } 这里div 要给固定的宽度 开始这里还想了半天 用网上的方法也不行 问老大 又一句话就给我解决了...老大真男神啊!!! ...

随机推荐

  1. 【SQL】SQL中笛卡尔积、内连接、外连接的数据演示

    SQL的查询语句中,常使用到内连接.外连接,以及连接的基础--笛卡尔积运算. 在简单的SQL中,也许我们还分辨清楚数据如何连接,一旦查询复杂了,脑子也犯浆糊了,迷迷糊糊的. 本文,简单以数据形式记录连 ...

  2. 【Linux】方便的SecureCRT文件上传、下载命令

    使用SecureCRT连接服务器,可用命令上传.下载文件,非常方便. > 安装 如果系统报找不到以下命令,那么你可能没有安装软件.安装以下吧. [root@localhost ~]# yum - ...

  3. DevExpress中使用DocumentManager，并确保不重复

    https://www.devexpress.com/Support/Center/Question/Details/Q411356 void ActivatForm(Type someType) { ...

  4. Populating Tabular Data Block Manually Using Cursor in Oracle Forms

    Suppose you want to populate a non-database data block with records manually in Oracle forms. This t ...

  5. Limiting To Select Only 5 Check Boxes Out Of Ten In Oracle Forms

    Suppose you want to give an option to user to select only 5 check boxes from given any number of che ...

  6. Formatting Excel File Using Ole2 In Oracle Forms

    Below is the some useful commands of Ole2 to format excel file in Oracle Forms.-- Change font size a ...

  7. Hibernate之N+1问题

    什么是hibernate的N+1问题?先了解这样一个描述: 多个学生可以对应一个老师,所以student(n)---teacher(1).Stu类中有一个属性teacher.在hibernate配置文 ...

  8. Xcode error: conflicting types for 'XXXX'

    问题描述:在main方法中调用了一个写在main方法后面的方法,比如: void main(){ A(); } void A(){} Xcode编译后就报错:conflicting types for ...

  9. Codeforces Round #287 (Div. 2) C. Guess Your Way Out! 思路

    C. Guess Your Way Out! time limit per test 1 second memory limit per test 256 megabytes input standa ...

  10. CSS3 transition/transform

    Transition 1.简写属性transition,可以包括四个属性,这四个属性的顺序按照下面介绍的顺序书写,即transition:property duration timing-functi ...