CODEWITHSUNDEEP
htmlcss
user3675890
user3675890

Reputation: 1

A Diagonal DIV in another DIV

Sorry for my english.

I have a problem. I need to create a DIV inside another DIV, which has to have a white background. I tried using skew, but It didnt work well.

Here is an image:

White Diagonal Div

Upvotes: 0

Views: 2382

Answers (6)

King King
King King

Reputation: 63317

There are at least several ways to achieve this, however the simplest way may be using linear-gradient background. Its quality is not really good compared with others but it's totally acceptable.

Try this:

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.

Upvotes: 4

web-tiki
web-tiki

Reputation: 103780

You can do that with a pseudo element and transform rotate :

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;
}

Upvotes: 2

K K
K K

Reputation: 18099

Since you need the border in your diagonal div, try this:

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>

Demo: http://jsfiddle.net/lotusgodkk/BKfe9/1/

You can modify the top,left,font-size,background-color,transform, border as per your need

Upvotes: 1

user3661424
user3661424

Reputation:

I think I understand your question, I think my example will help

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;
}

Upvotes: 0

Merlin Denker
Merlin Denker

Reputation: 1418

If you want to do it in pure CSS I would recommend using the transform: rotate(xxx) feature of CSS3. I've created a JS-Fiddle that will help you get started (not the best solution...), it is not based on your fiddle: http://jsfiddle.net/syTu7/

Upvotes: 0

steeve
steeve

Reputation: 699

In HTML,

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

In CSS, 

.inner {
background: #fff;     
}

Upvotes: -2

Related Questions