Kevin Powell - Community•2y ago

I need help how to slice a div in half when using clip-path polygon

So how to solve this i thought clip path polygon reshapes the entire thing but i was wrong it doesnt seem to do it and my web is overflowing

index.html

style.css

15 Replies

! @#$%^&*({[0X19818942118]})-|++OP•2y ago

https://canary.discord.com/channels/436251713830125568/1201462962515349545

Choo♚𝕂𝕚𝕟𝕘•2y ago

Why don't you build your half hexagons from half width divs? You would need to modify the polygon for the clip path, but it would solve the overflow.

.halfHexagon {
    width: 3.615rem;
    height: 7.23rem;
    margin-left: 2px;
    margin-right: -100px;
    margin-bottom: 5px;
    background: #111;
    padding-right: -10px;
    clip-path: polygon(100% 0, 0% 25%, 0% 75%, 100% 100%);
    animation: rgb 4s linear infinite;
    transition: 15s;
}

.halfHexagon {
    width: 3.615rem;
    height: 7.23rem;
    margin-left: 2px;
    margin-right: -100px;
    margin-bottom: 5px;
    background: #111;
    padding-right: -10px;
    clip-path: polygon(100% 0, 0% 25%, 0% 75%, 100% 100%);
    animation: rgb 4s linear infinite;
    transition: 15s;
}

! @#$%^&*({[0X19818942118]})-|++OP•2y ago

Ok I will check it out But I tried a different approach instead Turned the bug into feat A buggy feet Also won't half width divs ruin the shape?

Choo♚𝕂𝕚𝕟𝕘•2y ago

It would only be ruined if you don't adjust the clip path. Did you test my code?

! @#$%^&*({[0X19818942118]})-|++OP•2y ago

Well yeah tried smillar method ones but it just broke the shape Need to be perfect center

! @#$%^&*({[0X19818942118]})-|++OP•2y ago

https://cdn.discordapp.com/attachments/935257458241310801/1203239955045023755/image.png?ex=65d05f88&is=65bdea88&hm=7540b22afa458d94de5e2028a48f74a92cc875e495414bd74ed37935ced26c93&

! @#$%^&*({[0X19818942118]})-|++OP•2y ago

But yeah kinda of problem solved I have actually deprecated the entire halfhexagon function Turned bug into a feat A buggy feet 🙃 Oh wait Nooo it won't work Gotta experiment tomorrow tired from learning js day 1

Choo♚𝕂𝕚𝕟𝕘•2y ago

You tried "similar methods" but you did not try my exact code. Here is a demonstration using your code and mine. They produce the exact same shape. https://codepen.io/chooking/pen/poYVXMY

ChooKing

CodePen

Half Hexagons

...

! @#$%^&*({[0X19818942118]})-|++OP•2y ago

oh ok let me try it then 🙂 brooooo

! @#$%^&*({[0X19818942118]})-|++OP•2y ago

same problem what so ever well its not fixable so forget it

! @#$%^&*({[0X19818942118]})-|++OP•2y ago

well here is my solulu

! @#$%^&*({[0X19818942118]})-|++OP•2y ago

welp what to do

Darryll•2y ago

What's the actual issue? You don't want the horizontal scroll? Have you looked into the overflow CSS style? Can be useful on a container to control the scroll It's a simpler way to tackle issues like this without having to mess around with lining up the background perfectly to the container and add new shapes etc which just complicates things

! @#$%^&*({[0X19818942118]})-|++OP•2y ago

Well I am a bit psychotic so I need everything perfect or I would get triggered Well I don't want side scroll

Gaming

Programming

I need help how to slice a div in half when using clip-path polygon

Did you find this page helpful?