Как по диагонали разделить квадратный div на 4 части, доступные для нажатия?
Вот как по диагонали «поделить» квадрат на 4 части:
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;
}<div>
</div>(результат)
Я хочу прикрепить событие к каждой цветной области, но, конечно, вы не можете прикрепить событие к границе. Как мне поступить?
Использование 4 div может быть оптимальным решением, как предложил @Adelin. Проверить этот вопрос в stackoverflow
Можно ли в эту форму поместить 4 div? Я имею в виду, можно ли сделать настоящий (не только визуально) треугольник div?
Вы могли бы вложить четыре div в одну оболочку. Поверните эту обертку на 45 градусов. Затем вы могли бы вставить эту оболочку в другой div и обрезать переполнение?
@samuellawrentz Я проверил ссылку, но не думаю, что ответ применим в моем случае.
Вы можете использовать холст или карту
@TheCrzyMan Звучит неплохо, но я обнаружил, что вам нужно создать (настоящий) наклонный контур исходной оболочки, что, как мне кажется, невозможно (хотя обтравочный контур может помочь).
@akai Выбрав направление движения, отметьте один из ответов как «ответ». Мне лично нравится ответ Аделин. Но мне нравится JS больше, чем HTML / CSS. Личное предпочтение.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 4
Если вы хотите использовать один div / другую логику в зависимости от местоположения, это может помочь.
Я просто написал это в консоли этой страницы:
document.body.addEventListener("click",(e)=>console.info(e))
И щелкнул в этом порядке по этим частям: "yellow", "red", "blue", "green" вашего образа. (Я держал ctrl при нажатии, чтобы он открывал изображение в новой вкладке, и эта страница сохранялась)
Результирующие события (4 зарегистрированные, ofc) имели атрибут path, который указывал, на каком элементе я щелкнул (в данном случае основным был img), и смещение X и смещение Y относительно этого элемента.
Отношение было:
{
"yellow": {offsetX: 18, offsetY: 59},
"red": {offsetX: 59, offsetY: 25},
"blue": {offsetX: 85, offsetY 46},
"green": {offsetX: 61, offsetY: 78},
}
Так что да, вы можете использовать из MouseEvent:
- offsetX
The offsetX read-only property of the MouseEvent interface provides the offset in the X coordinate of the mouse pointer between that event and the padding edge of the target node.
- offsetY
The offsetY read-only property of the MouseEvent interface provides the offset in the Y coordinate of the mouse pointer between that event and the padding edge of the target node.
И определите, где щелкнул пользователь.
Буду читать, спасибо. Совершенно нормально использовать 4 блока, но, комментируя исходный пост, я считаю, что заполнение блока четырьмя блоками в этой форме, возможно, довольно сложно.
Вот один из способов сделать это. Вложенные DIV. Я использовал обертку с сеткой, чтобы выложить их по шаблону 2x2, затем перевел и повернул обертку. Обрезано с использованием самого внешнего div. Для каждого из них легко использовать onclick, и вам не нужно выполнять дополнительную логику. Просто гораздо больше усилий для настройки.
У меня также есть эта настройка, чтобы вы могли легко изменять размер квадратов. Однако это определенно не будет работать в IE, но я не думаю, что нам действительно нужно об этом беспокоиться.
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"> </div>
<div class = "blue"> </div>
<div class = "yellow"> </div>
<div class = "green"> </div>
</div>
</div>Вы можете использовать путь клипа для создания треугольников и использовать некоторое позиционирование, чтобы поместить их в правильные места.
document.querySelector('.sq-tri').addEventListener("click", (evt) => {
console.info(evt.target.getAttribute('data-location'))
}).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%);
}<div class = "sq-tri">
<div class = "tri tri-down" data-location = "top"></div>
<div class = "tri tri-right" data-location = "left"></div>
<div class = "tri tri-left" data-location = "right"></div>
<div class = "tri tri-up" data-location = "bottom"></div>
</div>Используйте SVG, как описано в этот ответ
Примечание: поскольку каждый из элементов внутри SVG имеет идентификатор, вы можете настроить таргетинг на них с помощью JS / JQuery.
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;
}<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>
проверьте положение мыши, когда произошел щелчок, и перейдите оттуда (лучше было бы использовать 4 разных div ofc)