CODEWITHSUNDEEP
htmlcssbordertransform
rohaldb
rohaldb

Reputation: 588

How to create angled double border effect CSS

I came across this codepen (scroll to the bottom), and i was wondering how i create the border effect seen here:

enter image description here

I have read through the code but i was hoping someone could explain a simple way of creating this effect. I believe it should be done by layering divs over eachother but i couldnt figure out the exact way:

<div class="outer">
 <div class="inner">
   <p>Text here</p>
 </div>
</div>

Upvotes: 0

Views: 885

Answers (3)

H D Ahir
H D Ahir

Reputation: 547

Please Try this below code 

.outer {
  border: 1px solid red;
  width: 400px;
  height: 320px;
  -webkit-transform: rotate(5deg);
  -moz-transform: rotate(5deg);
  transform: rotate(5deg);
  position: relative;
  z-index: 9999;
  margin-left: 10px;
  margin-top: 20px;
}
.inner {
  border: 1px solid blue;
  width: 100%;
  height: 320px;
  margin: 0 auto;
  -webkit-transform: rotate(-5deg);
  -moz-transform: rotate(-5deg);
  transform: rotate(-5deg);
  padding: 20px;
  box-sizing: border-box;
}
<div class="outer">
  <div class="inner">
    <p>Text here</p>
  </div>
</div>

Upvotes: 2

tao
tao

Reputation: 90068

By using the transform CSS property, the element remains in exactly the same place in terms of position in the document flow, but is rendered according to the transformation. This way you can tweak the way an element is rendered without affecting the document flow (so the other content doesn't jump around the page trying to refill the page.

In your case, some transparent elements with colored borders have been added to the page and they have been slightly transformed: 

transform: rotate(3deg) scale(1.01);

The trouble with transform is you have to run it through Autoprefixer so it becomes cross-browser:

-webkit-transform: rotate(3deg) scale(1.01);
   -moz-transform: rotate(3deg) scale(1.01);
    -ms-transform: rotate(3deg) scale(1.01);
     -o-transform: rotate(3deg) scale(1.01);
        transform: rotate(3deg) scale(1.01);

Working example: 

body {
  margin: 0;
  color: rgba(255,255,255,.87);
  background-color: #212121;
}
.white-border {
  margin: 2rem auto;
  max-width: 80vw;
  min-height: 50vh;
  position: relative;
  padding: 2rem;
  border: 2px solid rgba(255,255,255,.87);
  overflow: visible;
}
.second-border {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  -webkit-transform: rotate(3deg) scale(1.01);
   -moz-transform: rotate(3deg) scale(1.01);
    -ms-transform: rotate(3deg) scale(1.01);
     -o-transform: rotate(3deg) scale(1.01);
        transform: rotate(3deg) scale(1.01);
  border: 2px solid #cf9;
}
<div class="white-border">
  <div class="second-border"></div>
  Your content goes here...
</div>

Upvotes: 3

sol
sol

Reputation: 22939

The answer is in the codepen you linked. This is it simplified:

http://codepen.io/sol_b/pen/QKjZQb

The divs should look like this:

<div class="box">
<div class="rotated-box"></div>
  your content
</div>

Upvotes: 0

Related Questions