CSS Clip Path - Invalid Property Value [closed] - html

Question

Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 1 year ago.
Improve this question
I am trying to create a complex clip-path from a logo in CSS and the console is giving me a Invalid Property Value I have calculated the X & Y axis based on a width and height of 508px x 190px
This is the logo I am working from
And this is the css:
.container {
width: 508px;
height: 190px;
margin: 0 auto;
background: #fff;
border: 1px solid #ebebeb;
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAoBAMAAAB+0KVeAAAAHlBMVEUAAABkZGRkZGRkZGRkZGRkZGRkZGRkZGRkZGRkZGSH0mEbAAAACnRSTlMAzDPDPPPYnGMw2CgMzQAAAChJREFUKM9jgAPOAgZMwGIwKkhXQSUY0BCCMxkEYUAsEM4cjI4fwYIAf2QMNbUsZjcAAAAASUVORK5CYII=');
background-size: 10px;
padding-left: 5px;
padding-top: 5px;
}
.logo-clip {
width: 100%;
height: 100%;
background-color: purple;
clip-path:
polygon(
0 0,
12% 0,
12% 75%,
26% 75%,
26% 48%,
37% 48%,
37% 29%,
26% 29%
26% 0,
37% 0,
57% 69%,
57% 0,
69% 0,
69% 34%,
82% 0,
98% 0,
78% 48%,
100% 100%,
84% 100%,
69% 63%,
69% 100%,
51% 100%,
37% 49%,
37% 100%,
0 100%,
0 0
);
}
HTML:
<div class="container">
<div class="logo-clip"></div>
</div>
Can anyone tell me what is wrong I calculated 26 points to work from and I have 26 X/Y pairs in the polygon 🤦🏻‍♂️

Answer 1

You're missing a comma after 26% 29%

Answer 2

You are missing a , after 26% 29% in the clip-path.
.container {
width: 508px;
height: 190px;
margin: 0 auto;
background: #fff;
border: 1px solid #ebebeb;
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAoBAMAAAB+0KVeAAAAHlBMVEUAAABkZGRkZGRkZGRkZGRkZGRkZGRkZGRkZGRkZGSH0mEbAAAACnRSTlMAzDPDPPPYnGMw2CgMzQAAAChJREFUKM9jgAPOAgZMwGIwKkhXQSUY0BCCMxkEYUAsEM4cjI4fwYIAf2QMNbUsZjcAAAAASUVORK5CYII=');
background-size: 10px;
padding-left: 5px;
padding-top: 5px;
}
.logo-clip {
width: 100%;
height: 100%;
background-color: purple;
clip-path:
polygon(
0 0,
12% 0,
12% 75%,
26% 75%,
26% 48%,
37% 48%,
37% 29%,
26% 29%,
26% 0,
37% 0,
57% 69%,
57% 0,
69% 0,
69% 34%,
82% 0,
98% 0,
78% 48%,
100% 100%,
84% 100%,
69% 63%,
69% 100%,
51% 100%,
37% 49%,
37% 100%,
0 100%,
0 0
);
}
<div class="container">
<div class="logo-clip"></div>
</div>

Answer 3

Everything is right just the color needs to be rgb(6, 173, 173) and there is a syntax mistake of a , after 26% 29%.
.logo-clip {
width: 100%;
height: 100%;
background-color: rgb(6, 173, 173);
clip-path: polygon(
0 0,
12% 0,
12% 75%,
26% 75%,
26% 48%,
37% 48%,
37% 29%,
26% 29%,
26% 0,
37% 0,
57% 69%,
57% 0,
69% 0,
69% 34%,
82% 0,
98% 0,
78% 48%,
100% 100%,
84% 100%,
69% 63%,
69% 100%,
51% 100%,
37% 49%,
37% 100%,
0 100%,
0 0
);
}