In this example below you will see how to do a mark with some HTML / CSS and Javascript

This awesome code was written by Bazalt, you can see more from this user in the personal repository.
You can find the original code on
Copyright Bazalt ©
  • HTML
  • CSS
<!DOCTYPE html>
<html lang="en" >

  <meta charset="UTF-8">
      <link rel="stylesheet" href="css/style.css">



  <div class="wrap">
	<img src="" alt="">



/*Downloaded from */
body {
	background: LightBlue;
	padding: 25px;

.wrap {
	/* Прозрачный кружок на белом фоне - ячейка фона */
	background: radial-gradient(transparent 50%, white 50%);
	/* размер ячейки фона */
	background-size: 20px 20px;
	/* сдвиг центра ячейки */
	background-position: 10px 10px;
	/* background-repeat: repeat; - по-умолчанию */
	/* отталкивает границы фона от картинки */
	padding: 10px;
	width: 300px;
	height: 220px;
	margin: 0 auto;

img {
	width: 100%;