Question

这是如何将一个正方形对角线“划分”为4个部分：

wrapper = textwrap.TextWrapper(width=50 subsequent_indent='    ')
line_length = 50
for item in product_list:
    menu = '{} - {}'.format(item['brands'], item['product_name'])
    curr_length = len(menu)
    menu =  wrapper.fill(menu)
    lastline = wrapper.wrap(menu)
    space = 0
    if len(lastline) > 1:
        if len(lastline[-1]) < line_length:
            space = line_length - len(lastline[-1]) + 4
        print('{:>2}. {:<50}{} Score : {}'.format(
            item['num'], menu, " "*space, item['nutrition_grade_fr']))

div {
  width: 0;
  height: 0;
  border-top: 50px solid red;
  border-right: 50px solid blue;
  border-bottom: 50px solid green;
  border-left: 50px solid yellow;
}

（结果）

我想在每个彩色区域附加一个事件 - 当然，您无法将事件附加到边框。我该怎么办？

Answer 1

这是一种方法。嵌套DIV。我使用带有网格的包装器将它们放置在2x2模式中，然后翻译并旋转包装器。使用最外层的div剪裁。每个都很容易使用onclick，你不需要做额外的逻辑。设置的工作量要多得多。

我也设置了这个设置，这样你就可以轻松改变方块的大小。但是，这肯定不适用于IE，但我认为我们真的不需要担心。

Working codepen

document.querySelector(".red").onclick = () => alert("red");

document.querySelector(".blue").onclick = () => alert("blue");

document.querySelector(".yellow").onclick = () => alert("yellow");

document.querySelector(".green").onclick = () => alert("green");

.clip {
  --size: 200px;
  height: var(--size);
  width: var(--size);
  overflow-x: hidden;
  overflow-y: hidden;
}

.rotate {
  height: calc(var(--size) * 1.5);
  width: calc(var(--size) * 1.5);
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  transform: translate(-50%, -50%) translate(calc(var(--size) * 0.5), calc(var(--size) * 0.5)) rotate(45deg) ;
}

.red {
  background: red;
}
.blue {
  background: blue;
}
.yellow {
  background: yellow;
}
.green {
  background: green;
}

<div class="clip">
  <div class="rotate">
    <div class="red">&nbsp;</div>
    <div class="blue">&nbsp;</div>
    <div class="yellow">&nbsp;</div>
    <div class="green">&nbsp;</div>
  </div>
</div>

Answer 2

如果您想根据位置追求单个div /不同逻辑，这可能会有所帮助。

我刚在这个页面的控制台中写了这个：

document.body.addEventListener("click",(e)=>console.log(e))

然后按此顺序点击您图片的"yellow"，"red"，"blue"，"green"。（我点击时按住了 ctrl ，这样就可以在新标签页中打开图片，这个页面会一直存在）

结果事件（4 loggeed，ofc）有一个path属性，表示我点击了哪个元素（在本例中，主要元素是img），以及offsetX＆amp; offsetY相对于此元素

关系是：

{
  "yellow": {offsetX: 18, offsetY: 59},
  "red": {offsetX: 59, offsetY: 25},
  "blue": {offsetX: 85, offsetY 46},
  "green": {offsetX: 61, offsetY: 78},
}

所以是的，您可以使用MouseEvent：

offsetX

MouseEvent接口的offsetX只读属性提供了该事件与目标节点的填充边缘之间鼠标指针的X坐标中的偏移量。
offsetY

MouseEvent接口的offsetY只读属性提供了该事件与目标节点的填充边缘之间鼠标指针的Y坐标的偏移量。

确定用户点击的位置。

Answer 3

您可以使用clip path制作三角形并使用一些定位将它们放在正确的位置。

＆＃13;

SELECT DATE_SUB(DATE_FORMAT(start_time, '%Y-%m-%d %H'), INTERVAL 1 HOUR)

＆＃13;

document.querySelector('.sq-tri').addEventListener("click", (evt) => {
  console.log(evt.target.getAttribute('data-location'))
})

＆＃13;

.sq-tri {
  display: relative;
  width: 5em;
  height: 5em;
}

.tri {
  position: absolute;
}

.tri-up,
.tri-down {
  width: 5em;
  height: 2.5em;
}

.tri-left,
.tri-right {
  width: 2.5em;
  height: 5em;
}

.tri:hover {
  background-color: lime;
  cursor: pointer;
}

.tri-up {
  margin-top: 2.5em;
  background-color: yellow;
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}

.tri-down {
  background-color: red;
  clip-path: polygon(50% 100%, 0% 0%, 100% 0%);
}

.tri-left {
  background-color: green;
  margin-left: 2.5em;
  clip-path: polygon(100% 100%, 100% 0, 0 50%);
}

.tri-right {
  background-color: blue;
  clip-path: polygon(0 100%, 0 0, 100% 50%);
}

＆＃13;

Answer 4

使用this answer

中详述的SVG

注意：由于SVG中的每个元素都有一个ID，您应该可以使用JS / Jquery来定位它们。

＆＃13;

svg {
  display: block;
  width: 200px;
  height: 200px;
  margin: 25px auto;
  border: 1px solid grey;
  stroke: #006600;
}

#buttons polygon:hover {
  fill: orange;
}


#top {
  fill: #cc3333;
}

#right {
  fill: #663399;
}

#left {
  fill: #bada55;
}

＆＃13;

<svg viewbox="0 0 100 100">
  <g id="buttons">
    <polygon id="top" points="0,0 100,0 50,50" />
    <polygon id="right" points="100,0 50,50 75,75 100,100" />
    <polygon id="bottom" points="0,100 50,50 75,75 100,100" />
    <polygon id="left" points="0,0 25,25 50,50 0,100" />
  </g>
</svg>

＆＃13;

如何将方形div对角划分为4个可点击的部分？

4 个答案: