Bone-effect

dabblet.css

/* Bone-effect */


/* ==========================================================================
   Skip to the next section
   ========================================================================== */
html {background: #333;}

.row {
	display: block;
	margin: 80px 0;
	text-align: center;
}
.row div {
	display: inline-block;
	margin: 0 40px;
}
.example {
	transform: scale(.4); /* Makes the color-coded example a bit smaller */
}


/* ==========================================================================
   The bone effect
   
   Because there is no softening of the border radius
   curves, the straight lines appear to go inward like a bone.
   ========================================================================== */
.bone-effect {
	width: 200px;
	height: 400px;
	background: white;
	border-radius: 40px;
}


/* ==========================================================================
   Basic attempts at defeating the bone effect. They are a little better,
   but still very unusable. Because of the way border radius curves work,
   there is no way to soften both sides. See the last rectangle for a
   showcase of the border radius curve up close. See how the straight lines
   next to the curve seem to bend?
   ========================================================================== */
.no-bone-effect {
	position: relative;
	width: 200px;
	height: 400px;
	background: white;
}
.no-bone-effect:before {
	content: "";
	position: absolute;
	z-index: -1; /* Places the block behind the main div */
	background: white;
}

.one {
	border-radius: 60px/100%;
}
.one:before {
	top: -9px;
	right: 28px;
	bottom: -9px;
	left: 28px;
	border-radius: 100%/20px;
}

.two {
	border-radius: 60px/90%;
}
.two:before {
	top: -21px;
	right: 23px;
	bottom: -21px;
	left: 23px;
	border-radius: 90%/60px;
}

.three {
	border-radius: 40px/100%;
}
.three:before {
	top: -9px;
	right: 19px;
	bottom: -9px;
	left: 19px;
	border-radius: 100%/20px;
}

.four {
	width: 400px;
	border-top-right-radius: 100px 200px;
}

.example:before {
	z-index: 1;
	background: red;
}

dabblet.html

<div class="row">
	<div class="bone-effect"></div>
</div>
<div class="row">
	<div class="no-bone-effect one"></div>
	<div class="no-bone-effect one example"></div>
</div>
<div class="row">
	<div class="no-bone-effect two"></div>
	<div class="no-bone-effect two example"></div>
</div>
<div class="row">
	<div class="no-bone-effect three"></div>
	<div class="no-bone-effect three example"></div>
</div>
<div class="row">
	<div class="no-bone-effect four"></div>
</div>

dabblet.js

// alert('Hello world!');

settings.json

{"view":"split-vertical","fontsize":"100","seethrough":"","prefixfree":"1","page":"css"}