“New” star

dabblet.css

/**
 * “New” star
 */

body {
	background: rgb(234, 234, 234);
	background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAMAAAAp4XiDAAAANlBMVEXn5+fo6Ojp6enk5OTy8vLx8fHr6+vl5eXv7+/j4+Pu7u7w8PDm5ubs7Ozq6urt7e3i4uLz8/PoUfk0AAAEvElEQVR4XpWWW6pgNwwE9X7L9tn/ZgP5yBBIhrk7kERVtyAYq1mDQppBgWBYHpjooYCv9jvjdUCVmL+pPUCEg+bfs7zC6Xkqbl28PQuKtMOS/W325e6NBGAGp/W4iF9RF6uBCR4x7IGkc/SWyOd6o4EvAviDatBbTd18ga97CiI8lQt+roBQE39bsObYBGBnIOdYh6DDfn4TaoDZAigVWsbz4CbX0UFKmINoFliorsKb/s37ZPkGwrEEjvMQ4X7T72YmQDyU3Wfgl9joYI2J2ErhQZKQpL6HobarN6YSPpHnSVpRx0FuUlbd+K677frf04A+dxH75oUS1NWE07f56zi2387Vjx/jHJpvsAfPh/f2mE5BJXh+RpcEZQJolskTCtrH0eUl4fGe8ezDKA2M0Op0Y72ONFwojnvrdsYK6Rx+kJNxYVVylOc1oOcNo+EXijdJT/uVR50mR3YYuJBiygq4F67D+d5WMVbN8fedW2J2BZkq6RtUGN+IsD5jBhcX8jy3HN3cKwLSmljVWXSU5I7XVWkDjMJxDlmA5c+a4aadnLW0g3WOnwjiszEe9gh0p1BURhEMsHN40t5s6D3Pj/EAN908G9WpmsYn3IeaxeBDNoaX5HlI32fHL0wDoHHMWyX5dPlAdG7kXIBfvKVODBOPcManbcoFDybKVHt6nqshLYjjHIaawg8CbPhQaNmFDM4EQ8+qfXQ89s5DBeRmvcPkCFXuSggTg5V9YylPzWb4XMhKBPwu2DyBk/bwI8lT9xW9yzHHPoGJRNtBNsm8UqOb8APqzyouF4Bq0L11V5La4u57H9zWCuUAMDhsdrv6TdT6FuAHw8dU/DIV3YdYojr/TwW0Ijn9hAFQT0JKO2L3Ll+DrCFJaKLSGbxaezfj7MdaSAr0TnyCIIKbq7BG/npTgMqE28sB90s9QtdnKOGJvZFspE3LgdOCkIi2QiSuk30Plp08kTtHAn7d+wmtp3qesNQW5SN+DXs/OOfXzvCdVF0TqiIA2GCc6E7Is0lzDe5FsqKg+S4gPYCFU1TzpaSBepyAb8ARxT2kt98t4Ve6qE6iCOFSmCp1jleQs5QQwJEutcFzOcUrb+csyGsvkJUnAPVej4X4F8QGERc8Pr6qlKN13kKi1NUECAzpRlZ4afQSg2x9rsb1dg1ofyqRjZxnojbh6OXbMEwZcZB8zR9mE+AtBtI1E8OqtC+h8CNQ613V8JEvJ7ZpnWBQghBkdt2U05+W6umFlJ/FcaXDgf8MRPbARvjGjJgPCb76B0boJYK+xAIzpHg6/cb045g+wJmXhR9fBkMnnweoF88Qy3lU39PDD+rT1QfhMdGMJ5n0fKyLhKDwfmwyAPsuqhmKfin3cgH+vtmxn6MgP3t1jl+QChr2bxEWjir0jBcYhURPksO/hNMSL9R024AwODowZjtPT9QgDckBO5qIvG1lcRFoLQJQk0eMSbCl+6ASInvhOkItHfy2972w6/LsuQUlOD43KRR1zUNThwy/4AZ3zlZhR3FfvnpbArBTovNCkatyG0dr+r3kH1xkc8tuPdVPWYFf9YrFWWZjarbLKpF+9PCmQno47QnqJ0io9hVT/05vqLf2isDlQMSfPEF/AXZNTAEejRwFAAAAAElFTkSuQmCC);
	font-family: "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
}


/*.star:before {
	position: absolute;
	display:block;
	content: "aaa";
	width: 100px;
	height: 100px;
	right: -100px;
	background-color: rgb(0, 66, 149);

}
*/
.container {
	position: relative;
	margin: 100px 50%;
}


.star, .star1, .star2, .star3, .star4 {
	position: absolute;
	display: block;
	/*margin: 100px auto;*/
	width: 100px;
	height: 100px;
	background-color: rgb(255, 66, 149);
}
.star, .star1, .star2, .star3 {
	text-indent: -100em;
}
.star {
	-webkit-transform: rotate(45deg);
}

.star1 {
	-webkit-transform: rotate(70deg);
}

.star3 {
	-webkit-transform: rotate(290deg);
}

.star-text {
	margin: 0 auto;
}


/*.star:after {
	position: absolute;
	display: block;
	content: "bbb";
	width: 100px;
	height: 100px;
	right: 100px;
	background-color: rgb(0, 66, 0);

}*/

dabblet.html

<div class="container">
<div class="star1"></div>
<div class="star"></div>

<div class="star2"></div>
<div class="star3"></div>
<div class="star4"><span class="star-text">New</div>




</div>

settings.json

{"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"all"}