在另一个DIV中的对角DIV

Question

对不起我的英语不好。

我有个问题。 我需要在另一个必须具有白色背景的DIV中创建一个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>

演示。

Answer 2

您可以使用伪元素来实现这一点，并变换rotation：

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小提琴，它可以帮助您入门（不是最佳解决方案...），它不是基于您的小提琴： 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;     
}