Clipping a div in Foundation 6 Possible

Are we able to “clip” or “mask” content to achieve a layout something like this in Foundation 6?

Thanks fro any ideas!

Hi, this is not a feature of Foundation Sites or any other major frontend framework.

clip-path in CSS is not supported by all browsers. See https://caniuse.com/#feat=css-clip-path

Good to know. Happy I asked the experts :slight_smile: Thanks very much for the quick reply.

To add more detail to a similar question. I’m using foundation 6.5.1 for sites. I’m using this code to create an IOS msg look for an FAQ page. So I searched for a starting point and found this example.

I placed it in my code without too much change to see the output and the clip item is way off to the left or right and does not seem to display correctly.

After much tinkering, it occurred to me that it may be a conflict issue. So I removed the Foundation 6.5.1 CSS and it looked perfect.

here’s the code
`

.faq {
padding-top: 10px;
position: relative;
border: 1px solid #ddd;
border-top: 0 none;
}
.message {
border-radius: 20px 20px 20px 20px;
margin: 0 15px 10px;
padding: 15px 20px;
position: relative;
}
.message.faq_q {
background-color: [[$dark_teal]];
color: #fff;
margin-left: 10rem;
}
.message.faq_a {
background-color: [[$light_teal]];
color: #363636;
margin-right: 10rem;
}
.message.faq_q + .message.faq_q,
.message.faq_a + .message.faq_a {
margin-top: -7px;
}
.message:before {
border-color: [[$dark_teal]];
border-radius: 50% 50% 50% 50%;
border-style: solid;
border-width: 0 20px;
bottom: 0;
clip: rect(20px, 35px, 42px, 0px);
content: " ";
height: 40px;
position: absolute;
right: -50px;
width: 30px;
z-index: -1;
}
.message.faq_a:before {
border-color: [[$light_teal]];
left: -50px;
transform: rotateY(180deg);
}`

Ignore the [$xxx], I can use smarty in my cms templates and stylesheets. I know that clip has been replaced by clip-path and that rect() should read inset(). So I put back foundation css and replaced the code with
clip-path: inset(20px, 35px, 42px, 0px);
but the border that is supposed to be clipped is now a full circle.

How can I rectify this problem?