ScreenWork ICON

by MKGaru

HTML

<div class="display">
  <div class="window" style="top:10%;left:40%;"></div>
  <div class="window" style="bottom:5%;right:40%;"></div>
  <div class="line"></div>
</div>

<hr style="margin-top:80px">

<div class="icon-base">
  <div class="display2">
    <div class="screen">
      <div class="pen"></div>
    </div>
    <div class="stand"></div>
  </div>
</div>

CSS

.display{
	position:relative;
	border: solid 8px #444;
	width: 320px;
	height: 180px;
	border-radius: 10px;
	background: linear-gradient(135deg, #e0f3fa 0%,#b6dffd 100%)
}
.display:after{
	display:block;
	content: "";
	width: 30px;
	height: 40px;
	background: #444;
	margin-left: 50%;
	transform:translateX(-50%);
	margin-top:180px;
	border-radius: 0% 0% 50% 50% / 0% 0% 0% 0%;
}

.window{
	background:white;
	width: 160px;
	height: 80px;
    position:absolute;
	outline: solid 2px #ccc;
	border-top: solid 10px #ddd;
}
.line{
	position:absolute;
	width: 120px;
	height: 120px;
	border: solid 8px #4e4;
	border-radius: 50%;
	left: 50%;
	top: 5%;
	transform:translateX(-50%);
	opacity: 0.4;
}

.icon-base{
  width:256px;
  height:256px;
}

.display2{
  background: linear-gradient(to bottom, rgba(115, 196, 142,1) 0%,rgba(66, 155, 96,1) 100%);
  width: 100%;
  height: 100%;
  padding:10%;
  box-sizing: border-box;
  border-radius: 10%;
}
.display2 .screen{
  width: 100%;
  height:80%;
  background:white;
  border-radius: 20% / 15%;
  box-sizing: border-box;
  padding: 12%;
  margin-top: 5%;
}
.display2 .screen:after{
  content:'';
  display: block;
  width: 100%;
  height: 100%;
  background: linear-gradient(to bottom, rgba(68, 175, 104,1) 0%,rgba(68, 175, 104,1) 100%);
}
.display2 .screen .pen{
  float: left;
  width: 60%;
  height: 20%;
  background: white;
  transform-origin: 0%;
  transform: translate(50%,330%) rotate(-43deg);
  border-radius: 0 50% 50% 0 / 0 150% 150% 0;
}
.display2 .screen .pen:after{
  content: '';
  display: block;
  width: 0;
  height: 0px;
  border: solid 10px transparent;
  border-right: solid 20px white;
  position: absolute;
  top: 5%;
  left: -40%;
}
.display2 .stand{
  background: white;
  border-radius: 80% 80% 0 0 / 300% 300% 0 0;
  width: 65%;
  margin: auto;
  margin-top: 0%;
  height: 8%;
}