CSS繪畫圖形

本案例使用CSS繪畫了一個放大鏡的圖案。

預覽演示地址：https://tympanus.net/codrops-playground/SaraSoueidan/kFTn9yJk/editor
將下面的代碼複製到演示地址對應位置即可查看效果。

<!-- HTML部分：-->
<div class="container">
  <div class="element"></div>
</div>

/* CSS部分： */
body {
  background-color: #F5F5F5;
  color: #555;
  font-size: 1.1em;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}
.container {
  margin: 40px auto;
  max-width: 700px;
}
.element {
  width:0;
  height:0;
  border:50px solid #009966;
  border-radius:50%;
 /* background-color: #009966;*/
  opacity: .8;
  position: relative;
  margin: 100px auto;
}

.element:after {
  position: absolute;
  content: "";
  display: block;
  height:50px;
    border:7px solid #009966;;
  border-radius:5px;;
  top:22px;
  left:42px;
 background-color: #009966;
  /* opacity: .8; */
 -webkit-transform: rotateZ(-45deg);
  transform:rotateZ(-45deg);
}
.element:before {
  position: absolute;
  content: "";
  display: block;
    border:40px solid rgba(255, 255, 255, 1);
  border-radius:50%;
  top:-40px;
  left:-40px;
 background-color: #009966;
  /* opacity: .8; */
 -webkit-transform: rotateZ(90deg);
  transform: rotateZ(90deg);
}