CODEWITHSUNDEEP
htmlcss
Snowcrash
Snowcrash

Reputation: 86097

Split div with diagonal line

How would you split a div into 2 parts (both containing horizontal text) by a diagonal line?

e.g. see this where 1 has a rectangular background image and 2 has text with a background color:

enter image description here

Upvotes: 1

Views: 7217

Answers (3)

Ubyjude Josh
Ubyjude Josh

Reputation: 1

.container {
  width: 400px;
  margin: 0 auto;
}
.box {
  width: 200px;
  height: 150px;
  text-align: center;
  float: left;
}
.box-1 {
  background: #ff4500;
}
.box-2 {
  background: #0ffab9;
}
.box-2:before {
  display: inline-block;
  margin: 0;
  margin-left: -101px;
  margin-top: -1px;
  position: absolute;
  content: '';
  width: 0;
	height: 0;
	border-bottom: 151px solid #0ffab9;
	border-left: 30px solid transparent;
}
<div class="container">
    <div class="box box-1">
    </div>
    <div class="box box-2">
      TITLE 1
    </div>
</div>

Upvotes: 0

Deepak Yadav
Deepak Yadav

Reputation: 7069

As per my knowledge, its cannot be done using any single CSS property directly, you will have to hack it via using pseudo-elements, or best approach will be do it using SVG

.container {
  width: 90%;
  margin: 0 auto;
}
.box {
  width: 200px;
  height: 150px;
  text-align: center;
}
.box-1 {
  background: #ff6347;
}
.box-2 {
  background: #0ff;
}
.box-2:before {
  display: inline-block;
  margin: 0;
  margin-top: -30px;
  margin-left: -30px;
  content: '';
  border: 30px solid transparent;
  border-right: 200px solid #0ff;
}
<div class="container">
    <div class="box box-1"></div>
    <div class="box box-2">
      TITLE 1
    </div>
</div>

Upvotes: 1

Stubbies
Stubbies

Reputation: 3114

You can do it with a pseudo element rotated like this:

body {
  background-color: #00bcd4;
}
.main {
  margin: 50px;
  overflow: hidden;
  position: relative;
  width: 350px;
}
.image {
  background: url(https://s-media-cache-ak0.pinimg.com/564x/ca/9b/ca/ca9bca4db9afb09158b76641ea09ddb6.jpg) center center no-repeat;
  background-size: cover;
  height: 200px;
}
.text {
  background-color: white;
  padding: 30px;
  position: relative;
}
.text > div {
  position: relative;
  z-index: 1;
}
.text:before {
  content: "";
  background-color: white;
  position: absolute;
  height: 100%;
  width: 120%;
  top: -20px;
  left: -10%;
  transform: rotate(5deg);
  z-index: 0;
}
<div class="main">
  <div class="image"></div>
  <div class="text">
    <div>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vitae gravida purus. Ut quis elit magna. Fusce et mattis sapien. Sed venenatis magna ut ligula facilisis, eget vulputate neque aliquet. Nulla lacinia condimentum leo non aliquet. Integer
      et enim dapibus, tempor ipsum non, fringilla enim. Cras semper fermentum dolor, at pharetra dolor ornare sit amet. Morbi eu dictum orci, tincidunt pretium nisi. Sed finibus vulputate eleifend. Nulla ac leo facilisis, fermentum tellus in, feugiat
      risus. Curabitur in sem luctus, pellentesque justo nec, aliquet velit. Nam euismod est sit amet ultrices consequat.
    </div>
  </div>
</div>

Upvotes: 8

Related Questions