<div class="avengers"></div>
<div class="shield"></div>
body {
	font-size: 30px;
	line-height: 1;
	margin: 0;
	padding: 0;
	background: #000;
	display: flex;
  flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	height: 100vh;
}
div {
	position: relative;
	width: 5em;
	height: 5em;
  margin: .5em;
}
div::before,
div::after {
	position: absolute;
	content: "";
}

/* AVENGERS */
.avengers {
	background:
		linear-gradient(113deg, transparent 18%, #000 18%, #000 38%, transparent 38%) 0 100% / 100% 50% no-repeat,
		radial-gradient(#000 55%, #c00 55%),
		transparent;
	border-radius: 50%;
}
.avengers::before {
	bottom: 0;
	left: 0;
	width: 100%;
	height: 120%;
	background:
		linear-gradient(90deg, transparent 55%, #c00 55%, #c00 73%, transparent 73%) 0 0 / 100% 80% no-repeat,
		linear-gradient(113deg, transparent 45%, #c00 45%, #c00 60%, transparent 60%) 0 0 / 70% 100% no-repeat,
		transparent;
}
.avengers::after {
	bottom: 0;
	width: 100%;
	height: 100%;
	background:
		linear-gradient(45deg, transparent 40%, #000 40%, #000 50%, transparent 50%) 71% 45% / 23% 23% no-repeat,
		linear-gradient(-45deg, transparent 50%, #000 50%, #000 60%, transparent 60%) 71% 75% / 23% 23% no-repeat,
		linear-gradient(90deg, #c00 0, #c00 100%) 40% 60% / 30% 16% no-repeat,
		transparent;
}

/* SHIELD */
.shield {
	background:
	linear-gradient(-65deg, #333 25%, transparent 25%) left 30% / 50% 25% no-repeat,
	linear-gradient(65deg, #333 25%, transparent 25%) right 30% / 50% 25% no-repeat,
	linear-gradient(48deg, transparent 56%, #ccc 56%, #ccc 59%, transparent 59%) left top / 40% 100% no-repeat,
	linear-gradient(-48deg, transparent 56%, #ccc 56%, #ccc 59%, transparent 59%) right top / 40% 100% no-repeat,
	linear-gradient(38deg, transparent 55%, #333 55%, #333 69%, #ccc 69%) left top / 50% 100% no-repeat,
	linear-gradient(-38deg, transparent 55%, #333 55%, #333 69%, #ccc 69%) right top / 50% 100% no-repeat,
	linear-gradient(48deg, transparent 55%, #333 55%, #333 60%, #ccc 60%) left top / 50% 100% no-repeat,
	linear-gradient(-48deg, transparent 55%, #333 55%, #333 60%, #ccc 60%) right top / 50% 100% no-repeat,
	linear-gradient(-42deg, transparent 61%, #ccc 61%, #ccc 62%, transparent 62%) left bottom / 50% 100% no-repeat,
	linear-gradient(42deg, transparent 61%, #ccc 61%, #ccc 62%, transparent 62%) right bottom / 50% 100% no-repeat,
	linear-gradient(-47deg, transparent 49%, #ccc 49%, #ccc 50%, transparent 50%) left bottom / 50% 100% no-repeat,
	linear-gradient(47deg, transparent 49%, #ccc 49%, #ccc 50%, transparent 50%) right bottom / 50% 100% no-repeat,
	linear-gradient(-52deg, transparent 29%, #ccc 29%, #ccc 36%, transparent 36%) left bottom / 50% 100% no-repeat,
	linear-gradient(52deg, transparent 29%, #ccc 29%, #ccc 36%, transparent 36%) right bottom / 50% 100% no-repeat,
	linear-gradient(48deg, transparent 54%, #ccc 54%, #ccc 55%, transparent 55%) left top / 50% 100% no-repeat,
	linear-gradient(-48deg, transparent 54%, #ccc 54%, #ccc 55%, transparent 55%) right top / 50% 100% no-repeat,
	#333;
	border-radius: 50%;
	box-shadow: 0 0 0 .1em #ccc inset, 0 0 0 .25em #333;
	overflow: hidden;
}
.shield::before {
	top: 18%;
	left: 46%;
	width: 15%;
	height: 10%;
	background: none;
	border-radius: 40% 40% 0 0 / 60% 60% 0 0;
	box-shadow: .25em .1em 0 .1em #333 inset;
	transform: skew(-5deg);
}
.shield::after {
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: linear-gradient(transparent, rgba(0,0,0,.3));
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.