Blitz - WPT: corner-shape-notch.html

wpt / css / css-borders / corner-shape / corner-shape-notch.html

/css/css-borders/corner-shape/corner-shape-notch.html

<!DOCTYPE html>
<head>
<title>CSS Borders and Box Decorations 4: 'corner-shape: notch' on all corners</title>
<link rel="help" href="https://drafts.csswg.org/css-borders-4/#corner-shaping">
<link rel="match" href="corner-shape-notch-ref.html">
<meta name="fuzzy" content="maxDifference=0-120;totalPixels=0-40">
<style>
    .target {
        background: green;
        width: 100px;
        height: 100px;
        border-radius: 25px;
        box-sizing: border-box;
        border: 5px solid red;
        corner-shape: notch;
    }
</style>
</head>
<div class=target></div>

/css/css-borders/corner-shape/corner-shape-notch-ref.html

<!DOCTYPE html>
<head>
<title>CSS Borders and Box Decorations 4: 'corner-shape: notch' on all corners — reference</title>
<style>
    .target {
        position: relative;
        background: red;
        width: 100px;
        height: 100px;
        box-sizing: border-box;
        clip-path: polygon(
            25px 0px, 75px 0px, 75px 25px, 100px 25px,
            100px 75px, 75px 75px, 75px 100px, 25px 100px,
            25px 75px, 0px 75px, 0px 25px, 25px 25px);
    }
    .target::before {
        content: '';
        position: absolute;
        inset: 0;
        background: green;
        clip-path: polygon(
            70px 5px, 70px 30px, 95px 30px,
            95px 70px, 70px 70px, 70px 95px,
            30px 95px, 30px 70px, 5px 70px,
            5px 30px, 30px 30px, 30px 5px);
    }
</style>
</head>
<div class=target></div>