Magnifier

https://danielpietrasik.pl/css-formy-i-struktury/

by Daniel Pietrasik

HTML

<!-- 
 - CSS Formy i struktury tworzone za pomocą kodu
 - https://danielpietrasik.pl/css-formy-i-struktury/
-->

<div id="magnifier"></div>

CSS

/**
 * CSS Formy i struktury tworzone za pomocą kodu
 * https://danielpietrasik.pl/css-formy-i-struktury/
 **/

#magnifier {
	font-size: 50px; /* Sterowanie rozmiarem figury. */
	width: 1em;
	height: 1em;
	border: .2em solid #F34A53;
  border-radius: 100%;
	position: relative;
  margin: 50px auto;
}

#magnifier:before {
	position: absolute;
	content: "";
	left: 100%;
	top: 100%;
	background: #F34A53;
	width: .7em;
	height: .2em;
	transform: rotate(45deg);
  transform-origin: 25% center;
}