"comic style" border

comic-style-border.markdown

"comic style" border

A Pen by khuongyolo on CodePen.

License.

index.html

<div class="box box1">
  <div class="oddboxinner"> bangers?</div>
</div>
<div class="box box2">
  <div class="evenboxinner"> bangers!</div>
</div>
<div class="box box3">
  <div class="oddboxinner"></div>
</div>

script.js

/*comic borders?*/

style.css

@import url(https://fonts.googleapis.com/css?family=Bangers);

body{
  background:#fff;
  font-family: 'Bangers', cursive;
  font-size: 25px;
}
.box{
  margin:25px;
  width:250px;
  height:250px;
  background:#fff;
  border: solid black;
  border-color: black;
  float:left; 
}

.box1{
  border-width: 3px 4px 3px 5px;
  border-radius:95% 4% 92% 5%/4% 95% 6% 95%;
  transform: rotate(2deg);
}
.box2{
  width:350px;
  border-width: 3px 3px 5px 5px;
  border-radius:4% 95% 6% 95%/95% 4% 92% 5%;
  transform: rotate(-2deg);
}

.box3{
  border-width: 5px 3px 3px 5px;
  border-radius:95% 4% 97% 5%/4% 94% 3% 95%;
  transform: rotate(2deg);
}

.oddboxinner{
  margin:15px;
  transform: rotate(-2deg);
}
.evenboxinner{
  transform: rotate(2deg);
  margin:15px;
  padding:0 5px;
  float:right;
  background:#ddd;
  border:1px solid #222;
  box-shadow:3px 3px 0 #222;
}