Question

抱歉我的英文。

我有问题。我需要在另一个DIV中创建一个DIV，它必须具有白色背景。我尝试使用偏斜，但它没有奏效。

这是一张图片：

White Diagonal Div

Answer 1

至少有几种方法可以实现这一点，但最简单的方法可能是使用线性渐变背景。与其他人相比，它的质量并不是很好，但它完全可以接受。

试试这个：

div {
  width:600px;
  height:300px;
  background:teal;
  border:1px solid teal;
}
.top {    
  width:100%;
  height:100px;
  font-size:25px;
  padding-left:30px;
  background:linear-gradient(175deg, white 60%, transparent 62%);
  border:none;
  box-sizing:border-box;
}

<强> HTML ：

<div>
  <div class='top'>Custom<br/>Home</div>
</div>

Demo.

Answer 2

您可以使用伪元素并转换旋转：

<强> DEMO

HTML：

<div id="header">
    Custom<br/>
    Home
</div>
<div id="content"></div>

CSS：

#header{
    background:#fff;
    position:relative;
    height:50px;
    z-index:1;
    font-size:30px;
    padding-left:10%; 
}
#header:before{
    content:'';
    position:absolute;
    bottom:0;
    right:0;
    width:110%;
    height:1000%;
    background:inherit;
    z-index:-1;
    border-bottom:2px solid #636A6E;

    -webkit-backface-visibility: hidden; /* to fix pixelisation in chrome */


    -ms-transform-origin:100% 100%;
    -webkit-transform-origin:100% 100%;
    transform-origin:100% 100%;

    -webkit-transform: rotate(-5deg);
    -ms-transform: rotate(-5deg);
    transform: rotate(-5deg);


}
#content{
    min-height:500px;
    background:#778385;
}

Answer 3

由于您需要对角线div中的边框，请尝试以下方法：

CSS：

.logo {
    width:110%;
    height:147px;
    top:-10%;
    left:-14px;
    border:2px solid black;
    position:absolute;
    background:#fff;
    transform:rotate(-7deg);
    -ms-transform:rotate(-7deg);
    /* IE 9 */
    -webkit-transform:rotate(-7deg);
    /* Opera, Chrome, and Safari */
}
.container {
    width:100%;
    height:612px;
    overflow:hidden;
    background:#7b8284;
    position:relative;
}
.inner {
    position:absolute;
    height:200px;
    transform:rotate(7deg);
    -ms-transform:rotate(7deg);
    /* IE 9 */
    -webkit-transform:rotate(7deg);
    /* Opera, Chrome, and Safari */
    padding:20px 90px;
    top:30%;
    font-size:30px;
}

HTML：

<div class="container">
    <div class="logo">
        <div class="inner">My Logo</div>
    </div>
</div>

演示：http://jsfiddle.net/lotusgodkk/BKfe9/1/

您可以根据需要修改顶部，左侧，字体大小，背景颜色，变换，边框

Answer 4

如果你想用纯CSS做，我建议使用CSS3的transform: rotate(xxx)功能。我已经创建了一个JS-Fiddle来帮助你入门（不是最好的解决方案......），它不是基于你的小提琴：http://jsfiddle.net/syTu7/

Answer 5

我想我理解你的问题，我认为我的例子会有所帮助

<强> HTML

<div class="wrapper">
  <div class="innter">some text</div>
</div>

<强> CSS

.wrapper {
  position: relative;
  width: 960px;
  margin: 0 auto;
  background: #ddd;
  min-height: 100%;
  height: 800px;
}
.innter {
  height: 500px;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: #ececec;
}

Answer 6

在HTML中，

<div class="wrapper">
<div class="inner">some content</div>
</div>

在CSS中，

.inner {
background: #fff;     
}

另一个DIV中的对角线DIV

6 个答案:

Demo.