rohaldb rohaldb - 2 months ago 16
CSS Question

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>

Answer

Please Try this below code

HTML Code :

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

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