css 带有圆孔的块，使用带有CSS渐变的border-radius

Posted 2021-05-13

{"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%);
}