Invalid Value Provided for CSS Clip Path

I'm currently attempting to design a sophisticated clip-path using a logo in CSS, but I keep receiving an error stating "Invalid Property Value." The X and Y coordinates have been computed based on dimensions of 508px x 190px

https://i.sstatic.net/Yhqbp.png

This is the logo that is serving as my inspiration

Below is the corresponding CSS:

.container {
    width:  508px;
    height: 190px;
    margin: 0 auto;
    background: #fff;
    border: 1px solid #ebebeb;
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAoBAMAAAB+0KVeAAAAHlBMVEUAAABkZGRkZGRkZGRkZGRkZGRkZGRkZGRkZGSH0mEbAAAACnRSTlMAzDPDPPPYnGMw2CgMzQAAAChJREFUKM9jgAPOAgZMwGIwKkhXQSUY0BCCMxkEYUAsEM4cjI4fwYIAf2QMNbUsZjcAAAAASUVORK5CYII=');
    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 someone point out what I might be doing wrong? I've meticulously plotted 26 points and included their X/Y pairs in the polygon 🤦🏻‍♂️

htmlcss

Answer №1

Don't forget to include a comma after 26% 29%

Answer №2

You need to add a comma 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+0KVeAAAAHlBMVEUAAABkZGRkZGRkZGRkZGRkZGRkZGRkZGRkZGSH0mEbAAAACnRSTlMAzDPDPPPYnGMw2CgMzQAAAChJREFUKM9jgAPOAgZMwGIwKkhXQSUY0BCCMxkEYUAsEM4cjI4fwYIAf2QMNbUsZjcAAAAASUVORK5CYII=');
        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%, // Here is where you need to add the comma
                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 looks good except for the color which should be changed to rgb(6, 173, 173). There is also a syntax error with a misplaced comma 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
   );
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

persistently drifting towards the right despite the absence of direction

Why is the adminbox floating when no command is present? The fixed div center is not functioning properly .adminbox { width: 200px; height: 17px; margin-top: 20px; padding: 20px; font-size: 12px; ...

jqueryhtmlcss

Box Pattern with Pop-Up Modal

Check out the grid of squares I've coded below: <div class='square-container'> <div class='square'></div> <div class='square'></div> <div class='square'></div& ...

javascriptjqueryhtmlcss

Opening a PHP file without performing thorough validation in JavaScript can lead to security vulnerabilities

I am in need of some assistance. I am currently working on a form and seem to be encountering an issue. Whenever I click on the submit button without checking the full validation, it performs the PHP action. For instance, when I input a serial number into ...

phphtml

Different body background color changes every second

I have a function called makeRandColor that generates a random color using RGB and template string literals. However, I am struggling to figure out how to make it work every second. I tried using setInterval but it doesn't seem to be functioning prope ...

javascripthtml

What causes the card to exceed the boundaries of its parent column?

My Form elements seem to be misaligned and not fitting correctly. .h-100 is used for the blue navigation background to occupy the full height of the screen. An answer explaining why my code snippet is not working would be appreciated. View Plunker here ...

csstwitter-bootstrapflexboxbootstrap-4

Manage form submission seamlessly without redirecting. Capture information without needing to prevent the default action, then proceed with redirection. Avoid redirecting when using preventDefault, but be aware that data may not

Currently stuck in a tricky situation. I've implemented a custom form submission to prevent redirecting when an express route is triggered by form submission. However, the issue arises when I lose the data being sent without redirection. document.get ...

javascripthtmlexpressxmlhttprequest

Enter the Kannada language into the HTML text box or input field

My html form consists of about 15 - 20 input and textarea fields. As a user, how can I enter information in Kannda or any other local language? https://i.stack.imgur.com/60PVT.png ...

javascriptjqueryhtmlcss

The td data is appearing fragmented and not continuous in one line

Why is the td element on my webpage not appearing on a single line? The weekly report for XYZ is displaying on two lines, but I want it to be on one line. Why is the label content showing up on the next line? Output: Weekly Report for Testing project ...

htmlcssasp.net

What steps can be taken to ensure that an element is perfectly centered within a div?

I have a div containing some images: <div> <img src="1.png"> </img> <img src="1.png"> </img> </div> Currently, the layout in browsers looks like this: ----------------- |XX | ----------------- H ...

htmlcss

Personalizing navigation tabs using Bootstrap

I've been working on creating a custom bootstrap navbar tabs, but I'm struggling to remove the borders and apply the custom colors. After some trial and error, here's what I have so far: .nav-tabs, .nav-pills { text-align: center; bo ...

javascripthtmlcssbootstrap-5

Tips for wrapping text labels in mat-slide-toggles (Angular Material)

Is there a way to get the title in mat-slide-toggle to wrap if it's too long while keeping its default position to the right of the toggle? <mat-slide-toggle class="slider">A really long title wrapped</mat-slide-toggle> I attemp ...

cssangularsassmaterial-uiangular-material

Making a div equal in height to an image

What I currently have is like this... https://i.stack.imgur.com/7FeSi.png However, this is what I am aiming for. https://i.stack.imgur.com/fn9m0.png The image dimensions are set up as follows... #content img{ padding: 3%; width: 60%; height: 50%; floa ...

htmlcssimage

Divide HTML content while keeping inner tags intact

Currently, I am developing an online store. In my code, there is a requirement to display attributes and descriptions for multiple products on a single page. The attributes are displayed in a table format, while the description can include simple text as w ...

phphtmlsplithtml-encode

"Creating multiple circles on an HTML5 canvas using an iPad: A step-by-step guide

My current code is only drawing one circle at a time on an iPad view, but I want to be able to draw multiple circles simultaneously. How can I achieve this? // Setting up touch events for drawing circles var canvas = document.getElementById('pain ...

javascripthtml

Understanding the read status of WhatsApp messages

I am seeking assistance with HTML layout and dynamically parsing content. My objective is to parse contacts who have read a specific message in the group. I have attempted to examine the DOM structure for the DIV block that contains these contacts, but it ...

pythonc#htmlselenium-webdriverhtml-parsing

Tips for seamlessly hiding display images with HTML

In my quest to create a basic image slider, I've managed to achieve it using a combination of JavaScript and HTML. Take a look at the code provided below. I've included all the necessary codes for clarity's sake. However, the issue arises w ...

htmlcss

What are the various methods for incorporating icons and logos into website design?

Can anyone provide insights on the quality of logos and icons used in professional websites? I often create logos and icons using Illustrator, but when comparing them to icons on websites like those shown in the provided image and links, mine appear blurry ...

htmlcssimagegraphicsweb

The unexpected behavior of nesting in CSS class selectors

Here is a paragraph element I'm working with: <p class='big bold'>Some random text</p> I attempted to style it using the following code: p .big{ font-size:60px; } p .bold{ font-weight:bold; } Unfortunately, the stylin ...

htmlcsscss-selectors

Is it feasible to generate emojis using a gulp Icon-font task?

I'm in the process of creating a script that can generate fonts from SVG images, and so far it's been successful (using similar code to what's provided on https://www.npmjs.com/package/gulp-iconfont) Now I have a more specific question - is ...

cssnode.jshtmlgulpicon-fonts

What is the best way to transfer a table with multiple rows in a single column to an Excel spreadsheet while maintaining the headers on a horizontal plane

Currently, I am in the process of gathering data. The data is being sent to me in a word format and organized in a vertical columned table with different headers and alternating data. I am looking for a way to export this data from Word into an Excel spre ...

htmlcssexcelvbams-word