Blitz - WPT: corner-shape-square-notch-mixed.html

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

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

<!DOCTYPE html>
<head>
<title>CSS Borders and Box Decorations 4: per-corner 'corner-shape' with mixed square and notch corners</title>
<link rel="help" href="https://drafts.csswg.org/css-borders-4/#corner-shaping">
<link rel="match" href="corner-shape-square-notch-mixed-ref.html">
<style>
    .target {
        background: green;
        width: 100px;
        height: 100px;
        border-radius: 25px;
        box-sizing: border-box;
        border: 5px solid red;
        corner-shape: square notch square notch;
    }
</style>
</head>
<div class=target></div>

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

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