求解？？？？实现圆形嵌套正方形再嵌套三角形，点击区分

需求是这样的，css实现如下图，这个很简单，但是要求js实现点击任何一个图形，弹出‘这是什么图形'框，

通过event的target对象可以判断类名实现这个效果，但最后写的是一个三角形，是border transparent来的，就会盖住后面的正方形，所以点击正方形是无效的，

下面是我写的代码，点击也是可以区分，但是最后的三角形没有做到,因为被盖住了，请问要怎么实现呢？？？？？

<!DOCTYPE html>
<html lang="en">
 
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    .aa {
      width: 300px;
      height: 300px;
      border-radius: 50%;
      background: black;
      position: relative;
    }
 
    .bb {
      width: 200px;
      height: 200px;
      background: #eee;
      position: absolute;
      top:50%;
      left: 50%;
      margin: -100px;
      overflow:hidden;
    }
 
    .cc {
      width:250px;
      height:250px;
      background:blue;
      transform:rotate(45deg);
      -ms-transform:rotate(45deg);     /* IE 9 */
      -moz-transform:rotate(45deg);     /* Firefox */
      -webkit-transform:rotate(45deg); /* Safari 和 Chrome */
      -o-transform:rotate(45deg);
      position:absolute;
      top:150px;
      left:-25px;
    }
  </style>
</head>
<body>
  <div class="aa">
    <div class="bb">
      <div class="cc">
      </div>
    </div>
  </div>
</body>
<script>
  var aa= document.getElementsByClassName("aa")[0];
  var bb= document.getElementsByClassName("bb")[0]; 
  var cc= document.getElementsByClassName("cc")[0];
  aa.onclick = function (e) {
    console.log(e.target)
    if(e.target.className == "aa"){
      alert("圓形")
    }else if(e.target.className == "bb"){
        alert("正方形")
    }
  }
</script>
</html>

 

posted @ 2019-03-18 22:08  云淡风轻xin  阅读(827)  评论(0)  编辑  收藏  举报