Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
"comic style" border by michael picker
via https://codepen.io/mp/pen/ldAFs/
<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>
@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;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment