CSS Figures

Pure CSS figures

by Konstantin Rouda

HTML

<div class="o-figure o-figure--infinity"></div>

CSS

HTML {
  /*using system font-stack*/
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
  font-size: 115%; /*~18px*/
  font-size: calc(16px + (30 - 16) * (100vw - 300px) / (1300 - 300) );
  line-height: 1.5;
  box-sizing: border-box;
}

BODY {
  margin: 0;
  color: #3a3d40;
}

*, *::before, *::after {
  box-sizing: inherit;
  color: inherit;
}

/*Actual Style*/

.o-figure {
	position: relative;
}

/*Infinity Sign*/
.o-figure--infinity {
	width: 1.87500rem; /*~30px*/
	height: 1.87500rem; /*~30px*/
	margin: 5rem;
	border: 0.62500rem solid cornflowerblue; /*~10px solid cornflowerblue*/
	border-radius: 50% 50% 0 50%;
	opacity: 0.8;
	filter: drop-shadow(0 0.12500rem 0.18750rem rgba(0, 0, 0, .15));
	transform: rotate(-45deg);
}

.o-figure--infinity::before {
	content: "";
	position: absolute;
	top: 100%;
	left: 100%;
	width: inherit; 
	height: inherit;
	border: inherit;
	border-radius: 0% 50% 50% 50%;
}















/*+++++++++++++++++++
    @Media Queries
+++++++++++++++++++++*/

@media screen and (min-width: 1300px) {
  
  HTML { font-size: 1.875em; } /*~30px*/
  
}