CSS Winkel Cut -Umrissknopf [Duplikat]

Post a reply

Smilies
:) :( :oops: :chelo: :roll: :wink: :muza: :sorry: :angel: :read: *x) :clever:
View more smilies
BBCode is ON
[img] is ON
[flash] is OFF
[url] is ON
Smilies are ON
Topic review
   

Expand view Topic review: CSS Winkel Cut -Umrissknopf [Duplikat]

by Anonymous » 24 Aug 2025, 22:54

Ich muss diese speziell geformte Taste erstellen. orange. < /p>
Ich habe eine nützliche Ressource aus CSS-Tricks gefunden. Ich brauche Winkeln nur im rechten und unten linken Pause zwei sollten gerade sein. Zusammen mit orangefarbenem Hover -Effekt, wie bereits erwähnt. Hier ist der Code, den ich ab sofort < /p>


habe ">

Code: Select all

*,
*::before,
*::after {
margin: 0;
padding: 0;
box-sizing: border-box;
}

body {
font-family: poppins, sans-serif;
padding: 20px;
background-color: #5240f3;
}

.box {
--b: 4px; /* border */
--s: 20px; /* size of the cut */

width: 300px;
display: inline-block;
aspect-ratio: 1.5;
position: relative;
z-index: 0;
}
.box:before {
content: "";
position: absolute;
inset: 0;
z-index: -1;
background: linear-gradient(45deg, white, white);
--g1: #000 var(--b), #0000 0 calc(100% - var(--b)), #000 0;
--g2: #0000 calc(0.707 * var(--s)), #000 0 calc(0.707 * var(--s) + var(--b)),
#0000 0 calc(100% - 0.707 * var(--s) - var(--b)),
#000 0 calc(100% - 0.707 * var(--s)), #0000 0;
-webkit-mask: linear-gradient(45deg, var(--g2)),
linear-gradient(-45deg, var(--g2)),
linear-gradient(90deg, var(--g1)) 50%/100% calc(100% - 2 * var(--s))
no-repeat,
linear-gradient(180deg, var(--g1)) 50% / calc(100% - 2 * var(--s)) 100%
no-repeat;
}< /code>









CSS Masking

Top