CODEWITHSUNDEEP
csssvgtransformcss-shapes
Bonttimo
Bonttimo

Reputation: 681

Irregular Div shape Distort one corner only

How would i create a div shape like this? I have read a lot of techniques but i could not figure this one out. Inside the div is text that should not be distorted.

Every technique is welcome it does not have to be pure css.

My HTML structure:

<div class="intro">
                <div class="intro-header">
                    <h1>Headline WOW</h1>
                </div>
                <div class="intro-text">
                    <p>Mieleni minun tekevi, aivoni ajattelevi lähteäni laulamahan, saa'ani sanelemasaa'ani sanelema sanelemasaa'ani sanelema </p>
                </div>
</div>

enter image description here

Upvotes: 3

Views: 4747

Answers (3)

jbutler483
jbutler483

Reputation: 24559

you could use some skewed pseudo elements for this:

.first,
.last {
  text-align: center;
  line-height: 80px;
  height: 80px;
  background: green;
  position: relative;
  display: inline-block;
  width: 400px;
  margin-bottom: 20px;
}
.first:after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  height: 50%;
  width: 100%;
  transform: SkewY(2deg);
  transform-origin: bottom left;
  background: inherit;
}
.last:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 50%;
  width: 100%;
  transform: SkewY(2deg);
  transform-origin: bottom right;
  background: inherit;
}
<div class="first">FIRST LINE</div>

<div class="last">LAST LINE</div>

An alternative (possibly) would be to use a gradient (although this may lead to jagged edges). Solution credit to Harry

body {
  background: -webkit-linear-gradient(0deg, crimson, indianred, purple);
}
div {
  height: 400px;
  width: 400px;
  background: -webkit-linear-gradient(75deg, lightseagreen 45%, transparent 45%, transparent 55%, lightseagreen 55%);
}
<div></div>

Upvotes: 4

David Calvin
David Calvin

Reputation: 194

This should do it.

html,body{
  margin:0;
  height:100%;
}
.intro{
  width:400px;
  display:inline-block;
  background:red;
  padding:50px;
}
.intro-header,.intro-text{
  width:100%;
  display:inline-block;
  background:#ccc;
  text-align:center;
  position:relative;
}
.intro-header{
  margin-bottom:50px;
}
.intro-header:after{
  position:absolute;
  left:0;
  content:"";
    width: 0; 
    height: 0; 
    border-left: 400px solid transparent;
    border-top: 20px solid #ccc;  
}
.intro-text:after{
  position:absolute;
  top:-20px;
  left:0;
  content:"";
    width: 0; 
    height: 0; 
    border-right: 400px solid transparent;
    border-bottom: 20px solid #ccc;  
}

Example: CodePen

Upvotes: 1

Stewartside
Stewartside

Reputation: 20915

You can do this with border cut-offs.

As an example:

.top {
  height: 300px;
  background: red;
  position: relative;
  width: 300px
}
.top:before {
  content: '';
  position: absolute;
  bottom: 0;
  right: 0;
  border-bottom: 10px solid white;
  border-right: 300px solid red;
  width: 0;
}
.bottom {
  height: 300px;
  background: red;
  position: relative;
  width: 300px;
  padding-top: 10px;
  margin-top: 0px;
}
.bottom:before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  border-top: 10px solid white;
  border-left: 300px solid red;
  width: 0;
}
<div class="top">Text</div>
<div class="bottom">Text</div>

Upvotes: 4

Related Questions