Potherca
9/28/2017 - 6:38 PM

A block with a round hole in it, using border-radius with CSS gradients

A block with a round hole in it, using border-radius with CSS gradients

{"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"css"}
// alert('Hello world!');
<div class="round">
Blowfish librantur in se quatuor, quinquies maior quam normalis, et quare? Quare id faciam? Ut terrorem facit, qui quid. Terrent! Ut alter, scarier pisces agminis off. Et quod tu es? Vos blowfish. Tu iustus in omnibus visio. Vides ... suus ' suus 'non aliud aerem. Nunc ... qui cum partibus blowfish Isai? Tu damnare ius. Vos blowfish. Dicere iterum. Dicere illam quasi velis eam. Es BLOWFISH! 
</div>
/**
 * A block with a round hole in it, using border-radius with CSS gradients
 * 
 * See it in action at http://dabblet.com/gist/9f5a6c8b9e29574910d49c3adf6b2f93
 */

div {    
	background: black;
	height: 15em;
	position: relative;
}

div:before {
	content:"\00a0";
	display: block;
	position: absolute;
	height: 100%;
	width: 50%;
	background-image:radial-gradient(circle at 50%, transparent 65%, black 0);
	left: -50%;
	border-top-left-radius: 50%;
	border-bottom-left-radius: 50%;
}

div {    
	width: 500px;
	margin:15px 35%;
	color: white;
    font-family: arial, helvetica, sans-serif;
    font-weight: bold;
}

body {
  background-size: 6px 6px !important;  
  background-image: linear-gradient(-45deg, transparent 46%, orange 49%, orange 51%, transparent 55%);
}