Create a Stylish Tilted Effect on Div Sides using CSS

I am attempting to create a specific shape using clip-path: polygon, but I am struggling to understand the documentation. The properties for this shape are unclear to me - what do the values represent in 

clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
? The documentation doesn't provide clear explanations.

After trying some code from another source, I have achieved a design with a slanted effect:

.inner-container-top {
            width: 130px;
            font-size: 12px;
            font-weight: 600px;
            background: #8b000a;
            color: #ffffff;
            padding: 7px;
            clip-path: polygon(0% 100%, 100% 100%, calc(100% - 30px) 0%, 0% 0%, calc(100% - 30px) 0%, 0% 0%);
        }
<div class="inner-container-top">HELLOWORLD</div>

However, I still don't understand why it is creating this effect. I need assistance in flipping the shape to slant in the opposite direction and adding a slant on the left side as well. Any help would be greatly appreciated.

htmlcsspolygonclip-path

Answer №1

The order for this clip-path goes from top left, to top right, then bottom right, and finally bottom left.

These percentages represent the X and Y coordinates within the container holding the polygon shape.

Utilize available tools to make your work more efficient - work smarter, not harder :)

Check out this resource for creating clip-paths!

clip-path: polygon(31% 55%, 100% 55%, 75% 100%, 0% 100%);

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

Solving Problems with D3 Bar Charts

I currently have a database structured with 5 columns: ID, customerName, dateYear, dateMonth, and dateDay. The date information is added to the database when a user submits a form. For example, if a user submits a form today, the 3 date columns would refle ...

javascriptphphtmlmysqld3.js

Changing the alignment of divs to center instead of the right side

I am currently working on a project that involves creating a tiled interface with responsive tiles. One issue I have encountered is that all the tiles are shifting to the left side of the div and not getting centered, no matter what I try. To see the pro ...

htmlcssalignmentcss-floatmargin

The addition of one-page navigation in Angular 7 seems to be experiencing some glitches

I recently added a new menu option to my Angular 7 project, but it's not functioning correctly. I used Bootstrap 4 and followed this example from here. Can anyone help me figure out the correct way to implement this? Check out the sample on StackBlit ...

cssangularbootstrap-4angular7

Eliminating the need for the horizontal scroll bar on the webpage

I'm dealing with a page that has multiple controls. Initially, there is no horizontal scrollbar on the page. However, as soon as I introduce an AjaxControlToolkit.Editor or a treeview onto the page, a horizontal scroll bar mysteriously appears. For ...

asp.nethtmlcss

Exploring the depths of recursive descent parsing and the intricacies of abstract

As I dive into creating a recursive descent parser from scratch for educational purposes, I've encountered some challenges along the way. To illustrate my point, let's take a quick look at a snippet of the CSS3 grammar: simple_selector = type_s ...

cssparsingcss-selectorsabstract-syntax-treerecursive-descent

Showing Information in an HTML Table

I am new to the world of PHP programming and constantly searching for solutions to my problems. If anyone has any ideas, please share them - I greatly appreciate any help in solving this issue. Within my database table, I have data structured as follows: ...

phphtmlmysql

AngularJS controller does not trigger ngRoute

I have developed a basic application to experiment with ngRoute functionality. The main page, index.html, contains a single link leading to a separate page named "informationdisplay.html". Despite configuring the route within the controller of the main pag ...

htmlangularjsroutesngrouteroute-provider

Animating Jquery to smoothly change opacity until it reaches 100% visibility

The script I have does several things, but the main issue lies in the last line where the opacity of the class doesn't seem to reach 100%.... $('.fa-briefcase').parent().on('click', function () { $("#colorscreen").remove(); ...

javascriptjqueryhtmlcss

Searching for mobile WiFi preferences through a web browserHere are the steps to

Is there a method to access mobile connectivity settings through a website? I am interested in determining the connection type (3G\4G\WiFi) and if it is WiFi, identifying the security method being used. Is this achievable? If so, how? Edit: If ...

javascripthtmlmobile-safarimobile-website

Displaying Hierarchical Data with AngularJS and ng-repeat

Recently, I've been working on finding an elegant solution to represent hierarchical data in my application. Specifically, I have implemented a slide effect for bootstrap badges that showcase sub-categories using AngularJS. With some guidance from th ...

javascriptcssangularjstwitter-bootstrap

The image link leading to the homepage lacks the functionality to be clicked on

My website has a logo on the top left that links to the home page, but only some areas of the image are clickable. It seems like the clickable and non-clickable areas are scattered randomly. How can I ensure that the link works across the entire area of ...

htmlcss

The automated Login Pop Up button appears on its own and does not immediately redirect to the login form

Hey guys, I'm struggling with modifying the jquery and html to ensure that when the login button is clicked, the login form pops up instead of displaying another login button. Another issue I am facing is that the login button seems to pop up automati ...

javascriptjqueryhtmlcss

Using Flask to Send a List to a Different View

I'm currently working on developing a web app using Flask along with related frameworks and libraries like Jinja, WTForms, etc. Since this is my first time working with Flask and building a comprehensive web application, I'm encountering some cha ...

pythonhtmlflaskweb-applicationsflask-wtforms

Text in SVG vanishes when label size increases

I've been exploring Morris.js for creating charts, which relies on SVG to generate graphs. I've shared a JSbin setup here: JSbin example One challenge with Morris.js is the X-Axis labels disappearing when they are too large. Adjusting the size o ...

cssgraphsvgchartsmorris.js

Using jQuery to create overlapping images

Currently, I am working on an effect that involves overlapping images. The idea is that when a bar is clicked and dragged, the image underneath should reveal by adjusting its width. While my code functions, there are some glitches present. One issue is tha ...

javascripthtmljquerycss

Differences in scope variables between Angular 1 and Angular 2

When working with scope.$on, scope.$watch, scope.$broadcast, $scope.$apply, $scope.$emit, etc, in Angular 1, I found that these properties are not valid in Angular 2. Can anyone recommend alternative methods for achieving similar functionality in Angular ...

javascriptangularjshtmlangulartypescript

Angular-dc bar graph failing to display properly

I'm having some trouble creating a bar chart using crossfilter, dc.js, and angular-dc. The rowchart is working properly, but the barchart is not displaying the bars. When I inspect the element in Chrome, I can see the values, and when I force focus, t ...

javascriptcssangularjsdc.js

Ways to verify browser rollover support (as some mobile devices lack a cursor)

I am currently exploring options to determine if rollover events are supported for navigation. If not, I plan to switch to click events. I have reviewed jQuery.Support and Modernizr but haven't come across anything that directly addresses my issue. T ...

javascriptjqueryhtml

Scale down the canvas element before retrieving the image data

In order to feed into an algorithm, I am looking for a way for users to draw on a canvas element and then convert it into an array of length 784. This array should represent the pixel shade intensity, which can be obtained using the ctx.getImageData() meth ...

javascripthtmlfabricjs

As the window size decreases, adjust the negative left margin to increase dynamically

Is there a way to adjust the margin-left property of mydiv-2 to become increasingly negative as the browser window is scaled down horizontally? #mydiv-1{ background-color:orange; width:60%; height:400px; margin-left: 150px } #mydiv-2{ backgr ...

javascriptjquerycss