如何用html + css创建牙齿代表

Question

您好，我尝试像牙卡一样构建牙齿的表示。我写了下面的css，但最终效果并不令人满意。

body{
  margin: 100px;
}

.container {
  width: 100px;
  height: 100px;
  border: solid 1px black;
  position: relative;
}

.top {
  border: solid 1px black;
  width: 68%;
  height: 20%;
  background: white;
  transform: perspective(3px) rotateX(-5deg);
  position: absolute;
  top: 4%;
  left: 15%;
}

.left {
  border: solid 1px black;
  width: 22.5%;
  height: 63%;
  background: white;
  transform: perspective(3.5px) rotateY(6deg);
  position: absolute;
  top: 17.5%;
  left: 6%;
}

.right {
  border: solid 1px black;
  width: 20%;
  height: 72%;
  background: white;
  transform: perspective(5.5px) rotateY(-8deg);
  position: absolute;
  top: 13%;
  right: 3%;
}

.center {
  border: solid 1px black;
  width: 53.5%;
  height: 54%;
  position: absolute;
  background: white;
  top: 22%;
  left: 23%;

}

.bottom {
  border: solid 1px black;
  width: 68%;
  height: 20%;
  background: white;
  transform: perspective(3px) rotateX(5deg);
  position: absolute;
  bottom: 4%;
  left: 15%;
}
.yellow{
  background-color: yellow;
}

和 HTML


    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="css/style.css">
    <title>Zęby</title>
</head>
<body>

<div class="container">
<div class="top"></div>
<div class="left"></div>
<div class="center"></div>
<div class="right"></div>
<div class="bottom"></div>
</div>

<script src="js/jquery.js"></script>
<script>
    $('.top').click(function(){
        $(this).toggleClass('yellow');
    });
</script>
</body>
</html>

也许你有更好的解决方案，看起来更好。我希望能够使用 Ajax/Jquery 捕获每个字段中的事件

我正在寻找更好的解决方案。我将不得不将许多这样的“牙齿”彼此相邻放置，如果整个事情都坚持不同的屏幕分辨率，那就太好了。

Answer 1

这个方向正确吗？

const a = Array.from(document.querySelector('.container').children)
a.forEach(c => {
  c.addEventListener('click', evt => {
    evt.target.classList.toggle('yellow')
  })
})

body{
  margin: 1em;
}

.container {
  width: 100px;
  height: 100px;
  border: solid 1px black;
  position: relative;
  cursor: pointer;
}

.top {
  border: solid 1px black;
  width: 68%;
  height: 20%;
  background: white;
  transform: perspective(3px) rotateX(-5deg);
  position: absolute;
  top: 4%;
  left: 15%;
}

.left {
  border: solid 1px black;
  width: 22.5%;
  height: 63%;
  background: white;
  transform: perspective(3.5px) rotateY(6deg);
  position: absolute;
  top: 17.5%;
  left: 6%;
}

.right {
  border: solid 1px black;
  width: 20%;
  height: 72%;
  background: white;
  transform: perspective(5.5px) rotateY(-8deg);
  position: absolute;
  top: 13%;
  right: 3%;
}

.center {
  border: solid 1px black;
  width: 53.5%;
  height: 54%;
  position: absolute;
  background: white;
  top: 22%;
  left: 23%;

}

.bottom {
  border: solid 1px black;
  width: 68%;
  height: 20%;
  background: white;
  transform: perspective(3px) rotateX(5deg);
  position: absolute;
  bottom: 4%;
  left: 15%;
}

.yellow{
  background-color: yellow;
}

<div class="container">
  <div class="top"></div>
  <div class="left"></div>
  <div class="center"></div>
  <div class="right"></div>
  <div class="bottom"></div>
</div>

如何用html + css创建牙齿代表

问题描述投票：0回答：1

1个回答

最新问题

如何用html + css创建牙齿代表

问题描述 投票：0回答：1

1个回答

最新问题

问题描述投票：0回答：1