Programmiererforum

Clip Path with Visible Border

* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
.divider {
position: relative;
background-color: blueviolet;
clip-path: polygon(40% 0%, 60% 0%, 64% 10%, 100% 10%, 100% 100%, 0% 100%, 0% 10%, 35% 10%);
padding: 200px;
box-shadow: -1px -10px 0px #03FAFE; /* Simulates a border */
}

Ich wollte mit dem von mir entworfenen Clip-Pfad einen oberen Rand erstellen.
Ich habe auch den Kastenschatten verwendet, aber der obere Rand ist nicht sichtbar.
Das obere Design erstelle ich mithilfe eines Clippfads. Ich möchte oben an meinem angezeigten Inhalt einen Rahmen haben, der reagiert.
Wie dieses – Beispieldesign
Mein Code –
[code]




Clip Path with Visible Border

* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
.divider {
position: relative;
background-color: blueviolet;
clip-path: polygon(40% 0%, 60% 0%, 64% 10%, 100% 10%, 100% 100%, 0% 100%, 0% 10%, 35% 10%);
padding: 200px;
box-shadow: -1px -10px 0px #03FAFE; /* Simulates a border */
}


















[/code]