Corners and borders

dabblet.css

/*
Corners and borders
*/
div{
	font: 150%/1 Helvetica, sans serif;
	float:left;
	color: blue;	
	margin:2em;	
	position:relative;
	max-width: 13em;		
	min-width: 5em;		
	max-height: 13em;	
	min-height: 5em;	
	padding: 2em 3em;
	}
div.first {
	background: linear-gradient(to top left, transparent 49% , red 50%);
	background-color: lime;
	background-size: 4em 4em;
	background-repeat:no-repeat;
	border:solid 1px red;
	text-shadow:0.1em 0.1em 0.5em 0.2em #fdf;	
	box-shadow:0.1em 0.1em 0.5em 0.2em pink;
	filter: drop-shadow(0 0 5em rgba(34,0,0 0.5));
	border-radius: 1em  6px  6px 6px;
	font: 150%/1 Helvetica, sans serif;
}  
div::before{	
	border-radius:25px 25px 25px;    	
	position:absolute;    	
	width:1.2em;    	
	height:1.2em;    
	text-align:center;	
	font: 100%/1.2 helvetica, sans serif;    	
	margin:1px auto;		
	background-color:beige;		
	color:red;
	}

div.second {
    background:lime;
	background:
		radial-gradient(circle at top left, transparent 2.5em, lime 0),		
		/*radial-gradient(circle at center, red 3em, lime 0)center,	*/
		linear-gradient(-135deg, transparent 15px, lime 0)top right,
		linear-gradient(-45deg, transparent 15px, lime 0)bottom right,
		linear-gradient(45deg, transparent 15px, lime 0)bottom left;
	background-size: 50% 50%;	
	background-repeat:no-repeat;
	
	filter:
		drop-shadow(0 0 10em rgba(0,60,60, 0.5))		
		drop-shadow(.1em .1em .1em rgba(220,0,0,.5))						
		drop-shadow(-0.1em -0.1em .1em rgba(220,20,20,.5));
	-webkit-filter: 
		drop-shadow(1px 1px 0.15em rgba(220,0,0,5))
		drop-shadow(-1px -1px 0.1em rgba(25,25,225,.5));	
}  

div.first::before{
    top:0.5em;
	left:0.5em;
	box-shadow:inset 0 0 .5em red;		
	content:"S";
	}
div.second::before{
    top:0;	
    left:0;   	
    box-shadow:inset 0 0 .15em red;	
    content:"S";	
    }

dabblet.html

<div class="first">
Hej. denne tekst er for at gøre opmærksom på at Stella er ekseptionelt dejlig. <br/ > Og for at fylde kassen her ud med bogstaver.
</div>
<div class="second">
Hej.<br /><br /> 
Denne tekst er for at gøre opmærksom på at Theresa er ekseptionelt dejlig. <br/ > Og for at fylde kassen her ud med bogstaver.
</div>

dabblet.js

var divs = document.getElementsByTagName('div');
divs[1].textcontent = divs[0].textcontent;

settings.json

{"view":"separate","fontsize":"70","seethrough":"","prefixfree":"1","page":"all"}