So beschneiden Sie langen Text mit CSS. So kürzen Sie eine lange Zeichenfolge um die Anzahl der Zeichen CSS- und JS-Problemlösung Wo es nützlich sein kann

In diesem Artikel führen wir Sie durch drei schnelle und einfache CSS-Techniken, mit denen Sie nur einen Teil eines Bildes auf Ihrer Seite anzeigen können.

Alle hier verwendeten Methoden benötigen tatsächlich nur ein paar Zeilen CSS Code. Dabei handelt es sich jedoch nicht um eine Beschneidung im wahrsten Sinne des Wortes ( CSS(ich kann es noch nicht), verstecken wir einfach nur den Teil des Bildes, den wir sehen wollen, und zeigen ihn wieder an.

Diese Techniken können sehr nützlich sein, wenn Sie die Größe eines Bildes auf eine bestimmte Größe ändern möchten, d. h. Sie möchten beispielsweise eine Vorschau (eine kleinere Kopie des Bildes) im News-Bereich oder ähnliches erstellen.

Wenn Sie keine Lust auf negative Ränder haben, empfehlen wir die Verwendung von Technik Nr. 2. Es enthält einen übergeordneten Absatz (Absatz), der eine bestimmte Breite und Höhe hat. Dieser Absatz hat die Eigenschaft Positionierung auf relative setzen. Die Breite und Höhe definieren die Abmessungen des angezeigten Feldes. Und für ein Bild, das innerhalb eines Absatzes platziert wird, die Eigenschaft Positionierung auf absolute setzen. Dann können wir Eigenschaften verwenden Spitze Und links Ordnen Sie das Bild nach Ihren Wünschen an und legen Sie dabei fest, welcher Teil des Bildes angezeigt werden soll und welcher nicht.

HTML identisch mit dem Code aus der vorherigen Technik:

Diese Technik dürfte die einfachste sein Clip-Eigenschaft definiert den Teil des Elements, der angezeigt werden soll. Es klingt nach einer perfekten Lösung, aber es gibt sie ein Haken: abgeschnittenes Element müssen absolut positioniert sein. Um ein Element verwenden zu können, müssen wir ein zusätzliches Element hinzufügen, die Größe des sichtbaren Bereichs des Bildes berechnen, diese Größe zum übergeordneten Element hinzufügen, das übergeordnete Element verwenden ... Eine Menge Arbeit, nicht wahr? nicht wahr?

Ach ja, noch ein Problem: Die Größe des beschnittenen Elements wird nicht auf den Wert des Ausschnitts verkleinert, sondern bleibt in seiner ursprünglichen Größe (das Bild außerhalb des Ausschnitts wird einfach ausgeblendet). Wir müssen die absolute Positionierung verwenden, um das Ansichtsfenster in die obere linke Ecke des übergeordneten Elements zu verschieben.

Allerdings darf man es nicht unerwähnt lassen Eigentum schneiden. Und so nochmal der Code...

Das Hinzufügen von Auslassungspunkten am Ende des Textes kann auf verschiedene Arten erreicht werden, wobei uns CSS und JS zur Verfügung stehen.

Schauen wir uns zunächst das Problem an. Es gibt ein Blocklayout

• Viel interessanter Text über Stile, Layout, Programmierung und vieles mehr Interessantes über Websites


• Aber wie können wir Auslassungspunkte setzen, wenn wir die Blockgröße nicht begrenzen können?


• Wie wäre es mit einem JS-Skript? Das kann er wirklich.


• Hm, das kann es auf jeden Fall. Hier ist der Code, er zählt Unicode-Zeichen und schneidet sie bei Bedarf ab

Jetzt müssen wir den Effekt erzielen, dass der Text in jedem Element der Liste abgeschnitten wird. Darüber hinaus müssen wir Auslassungspunkte hinzufügen.

Erstellen Sie dazu einen Stil für die Klasse tit
.tit(
Leerraum: nowrap; /* Textumbruch abbrechen */
Überlauf versteckt; /* Inhalt kürzen */
Polsterung: 5px /* Felder */
Textüberlauf: Auslassungspunkte; /* Auslassungspunkte */
}

Die Besonderheit dieser Lösung besteht darin, dass die Auslassungspunkte nicht hinzugefügt werden, wenn der Text in die Blockgröße passt. Was nicht immer die Lösung des Problems ist.

Meistens müssen Sie den Text auf seine Länge zuschneiden und erst danach Punkte hinzufügen.
Es gibt auch Aufgaben, bei denen es trotzdem notwendig ist, Punkte hinzuzufügen (egal wie lang der Text ist, mindestens 3 Buchstaben). Und wenn der Text länger als eine bestimmte Größe ist, muss er beschnitten werden. In diesem Fall ist der Einsatz von Skripten erforderlich.

Funktionstitel() (
var-Element, Größe, Text;
varelem = document.getElementsByClassName("tit");
vartext = elem.innerHTML;
Var-Größe = 75;
Varn = 70;
for(var i = 0; i< elem.length; i++) { /* необходимо вставить цикл, чтоб получить все блоки с классом tit */
if(elem[i].innerHTML.length > size) (
text = elem[i].innerHTML.substr(0,n);
}
anders(
text = elem[i].innerHTML;
}
elem[i].innerHTML = text + „…“;
}
}
Titel();

Wir teilen dem Skript mit, welche Elemente verarbeitet werden sollen.
Dazu muss in der Zeile var elem = document.getElementsByClassName("tit"); Geben Sie die Klasse des Elements an (sie muss identisch sein).

Anschließend müssen Sie die Größe des Texts festlegen, bevor dieser zugeschnitten wird. Dies sind unsere kurzen Zeichenfolgen, zu denen Auslassungspunkte hinzugefügt werden. Verantwortlich dafür var-Variable Größe=75;

Nun sollte das Skript alle Elemente mit der gewünschten Klasse durchgehen und die Auslassungspunkte einfügen.
Das Skript prüft die Länge jeder Zeile und schneidet den Text ab, wenn er länger als 75 Zeichen ist. Wenn die Länge geringer ist, wird einfach ein Auslassungszeichen hinzugefügt (die Zeile if(elem[i].innerHTML.length > size)).

Wie das Skript funktioniert, können Sie auf der Demoseite sehen. Das ist alles, jetzt wissen Sie, wie Sie langen Text mit verschiedenen Methoden kürzen.

Hallo zusammen, mein Name ist Anna Blok und heute werden wir darüber sprechen, wie man Bilder ohne Verwendung von Grafikprogrammen zuschneidet.

Erstens auf Websites, auf denen Inhalte mit Bildern höchstwahrscheinlich nicht so zugeschnitten werden, dass sie in einen bestimmten Block passen.

Ein Paradebeispiel ist ein WordPress-Blog.

Nehmen wir an, Sie möchten, dass das Cover Ihres Artikels ein Seitenverhältnis von 1:1 (quadratisch) hat. Eure Aktionen:

Wenn Sie die Website besuchen, werden Sie das erwartete Ergebnis sehen.

Aber was passiert dann, wenn Sie vergessen haben, das Bild in Photoshop zuzuschneiden und ein zufälliges Bild als Cover aus dem Internet hochgeladen haben?! Das ist richtig, das Layout wird kaputt gehen. Und wenn Sie überhaupt kein CSS verwendet haben, kann ein Bild in HD-Auflösung die gesamte Textansicht vollständig blockieren. Daher ist es wichtig, Bilder wann zuschneiden zu können CSS-Hilfe Stile.

Schauen wir uns verschiedene Situationen an, wie dies nicht nur mit CSS, sondern auch mit SVG umgesetzt werden kann.

Versuchen wir, ein Bild zuzuschneiden, das mithilfe des Hintergrundbilds platziert wurde. Lassen Sie uns ein HTML-Markup erstellen

Kommen wir zum CSS-Stil. Wir fügen über „background-image“ ein Bild hinzu, legen die Rahmen für unser Bild fest, zentrieren das Bild über „background-position“ und legen die „Hintergrundgröße“ fest:

jpg); Hintergrundposition:Mitte-Mitte; Hintergrundgröße:cover; Breite:300px; Höhe: 300 Pixel; )

Dies war die erste und einfachste Methode zum Zuschneiden eines Bildes. Schauen wir uns nun das zweite Beispiel an.

Angenommen, wir haben denselben Box-Container, in dem sich ein img-Tag mit einem Bild befindet, das wir jetzt formatieren werden.

Außerdem platzieren wir unser Bild in der Mitte relativ zu dem Objekt, das wir erstellen werden. Und wir verwenden eine Eigenschaft, die recht selten verwendet wird: object-fit .

Box ( position: relative; overflow:hidden; width:300px; height:300px; ) .box img ( position: absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:300px; height:300px; object-fit:cover; )

Meiner Meinung nach dies beste Methode. Ideal für Blogs ist es, wenn Sie Bilder für Beiträge mit völlig unterschiedlichen Ausmaßen verwenden.

Erfahren Sie hier mehr über HTML und CSS:

Wir können derzeit auch Ausschnitte für Bilder erstellen, wenn wir diese in SVG-Elemente einfügen. Nehmen wir als Beispiel einen Kreis. Wir können SVG mithilfe von Tags erstellen. Erstellen Sie ein umschließendes SVG-Tag, in dem sich ein Kreis-Tag und ein Muster-Tag befinden. In den Muster-Tag schreiben wir den Bild-Tag. Darin geben wir das Attribut xlink:href an und fügen ein Bild hinzu. Wir werden auch die Attribute width und height hinzufügen. Aber das ist nicht alles. Wir müssen einen Füllwert hinzufügen. Um unsere Arbeit zu vervollständigen, fügen wir dem Bild-Tag ein zusätzliches Attribut „preserveAspectRatio“ hinzu, das es uns ermöglicht, unser Bild „von und nach“ um den Kreis herum zu füllen.

Ich kann diese Methode nicht generisch nennen. Es kann aber in Ausnahmefällen eingesetzt werden. Wenn wir beispielsweise das Thema eines Blogs ansprechen, dann könnte eine solche Methode idealerweise in den Avatar des Autors passen, der den Artikel schreibt.

Erfahren Sie hier mehr über HTML und CSS:

Ergebnisse:
Wir haben drei Methoden zum Zuschneiden von Bildern auf Websites behandelt: die Verwendung von „background-image“, die Verwendung des „img“-Tags und die musterbezogene SVG-Datei mit Einbettung Bitmaps Verwenden des Bild-Tags. Wenn Sie andere Methoden zum Zuschneiden eines Bildes mit SVG kennen, teilen Sie diese in den Kommentaren mit. Nicht nur für mich, sondern auch für andere wird es nützlich sein, etwas darüber zu erfahren.

Vergessen Sie nicht, Ihre Fragen zum Layout oder zur Frontend-Entwicklung den Profis von FrontendHelp online zu stellen.

Wir möchten immer, dass auf der Website alles ordentlich ist, aber Sie haben beispielsweise Blöcke mit Text, der innerhalb bestimmter Grenzen eingegeben werden muss, das kann eine Ankündigung für einen Artikel oder eine Beschreibung eines Produkts sein. Der Text ist beliebig lang. Natürlich können Sie den Text ständig an die Größe des Feldes anpassen, sodass nichts passiert, Sie können es aber auch so gestalten, dass der zusätzliche Text ausgeblendet wird.

Hierfür gibt es eine einfache CSS-Lösung. Immobiliennutzung Textüberlauf: Auslassungspunkte, wodurch Sie eine Zeichenfolge mit einem langen Test kürzen können. Damit diese Lösung funktioniert, müssen Sie die Breite des übergeordneten Blocks angeben und über die Eigenschaft verfügen Überlauf gleich versteckt oder Clip.

Box-Text ( text-overflow: ellipsis; //Bild von langen Boxen mit Textüberlauf: versteckt; //überlaufenden Text ausblenden width: 100%; //Breite der Box mit Text-Leerraum: nowrap; //Umbruch verbieten Text)

Alle ihre Geräte und Werkzeuge waren in der einen oder anderen Form lebendig.

Alle ihre Geräte und Werkzeuge waren in der einen oder anderen Form lebendig.

Aber um mehrzeiligen Text in CSS zuzuschneiden, muss man auf Pseudoelemente zurückgreifen :Vor Und :nach.

Box-Text ( Überlauf: versteckt; Höhe: 200 Pixel; Zeilenhöhe: 25 Pixel; ) .box-text:before ( Inhalt: ""; Float: links; Breite: 5 Pixel; Höhe: 200 Pixel; ) .box-text > * :first-child ( float: right; width: 100%; margin-left: -5px; ) .box-text:after ( content: "\02026"; box-sizing: content-box; float: right; position: relativ; oben: -25px; links: 100%; Breite: 3em; Rand links: -3em; Polsterung rechts: 5px; Textausrichtung: rechts; Hintergrundgröße: 100% 100%; Hintergrund: linearer Farbverlauf( nach rechts, rgba(255, 255, 255, 0), weiß 50 %, weiß); )

Die linke Seite des Waldes war dunkel und lag im Schatten; das rechte, nass, glänzend, in der Sonne glänzend, leicht wiegend im Wind. Alles blühte; Die Nachtigallen zwitscherten und rollten mal nah, mal weit weg.

Die linke Seite des Waldes war dunkel und lag im Schatten; das rechte, nass, glänzend, in der Sonne glänzend, leicht wiegend im Wind. Alles blühte; Die Nachtigallen zwitscherten und rollten mal nah, mal weit weg.

Abstriche sind nicht nur der schnelle Weg Zielerreichung, sondern auch eine beliebte Gestaltungsmöglichkeit sowohl im Print- als auch im Webdesign. Am häufigsten werden dabei eine oder mehrere Ecken des Behälters in einem Winkel von 45° abgeschnitten. IN In letzter Zeit Aufgrund der Tatsache, dass der Skeuomorphismus gegenüber dem Flat Design an Bedeutung verlor, ist dieser Effekt besonders beliebt. Wenn die Ecken nur auf einer Seite abgeschnitten werden und jede Ecke 50 % der Elementhöhe einnimmt, entsteht eine pfeilförmige Form, die auch häufig bei der Gestaltung von Schaltflächen und Breadcrumb-Navigationselementen verwendet wird.

Allerdings gibt es in CSS immer noch nicht genügend Werkzeuge, um diesen Effekt mit einfachen und unkomplizierten Einzeilerlösungen zu erzeugen. Aus diesem Grund neigen viele Entwickler dazu, zu verwenden Hintergrundbilder: Decken Sie entweder die abgeschnittenen Ecken mit Dreiecken ab (auf einem einfarbigen Hintergrund) oder erstellen Sie den gesamten Hintergrund mit einem oder mehreren Bildern, bei denen die Ecken bereits abgeschnitten sind. Offensichtlich sind solche Methoden völlig unflexibel, schwer zu warten und erhöhen die Latenz aufgrund zusätzlicher HTTP-Anfragen und der Gesamtdateigröße der Website.

Ein Beispiel für eine Website, bei der die abgeschnittene Ecke (unten links im halbtransparenten Feld „Suchen & Buchen“) perfekt in das Design passt

Eins Mögliche Lösung Bieten Sie uns die allmächtigen CSS-Verläufe. Nehmen wir an, wir möchten nur eine abgeschnittene Ecke, beispielsweise die untere rechte Ecke. Der Trick besteht darin, die Fähigkeit des Farbverlaufs zu nutzen, um die Richtung des Winkels (z. B. 45 Grad) und die Position der Farbübergangsgrenzen in absoluten Werten zu erfassen, die sich nicht ändern, wenn sich die Gesamtabmessungen des Elements ändern, zu dem der Hintergrund gehört . Aus dem oben Gesagten folgt, dass ein linearer Gradient für uns ausreichen wird.

Wir fügen einen transparenten Farbüberblendungsrand hinzu, um die abgeschnittene Ecke zu erstellen, und einen weiteren Farbüberblendungsrand an derselben Position, dessen Farbe jedoch zum Hintergrund passt. Der CSS-Code wäre der folgende (für eine 15-Pixel-Ecke):

Hintergrund: #58a;
Hintergrund: linearer Farbverlauf (-45 Grad, transparent 15 Pixel, #58a 0);

Ganz einfach, oder? Das Ergebnis sehen Sie im Bild.

Technisch gesehen brauchen wir nicht einmal die erste Ankündigung. Wir haben es nur als Workaround hinzugefügt: Wenn CSS-Verläufe nicht unterstützt werden, wird die zweite Deklaration ignoriert, sodass wir zumindest einen einfarbigen Hintergrund erhalten. Nehmen wir nun an, wir möchten zwei abgeschnittene Ecken, beispielsweise beide unteren. Mit einem Farbverlauf geht das nicht, also brauchen wir zwei. Ihr erster Gedanke könnte etwa so lauten:

Hintergrund: #58a;
Hintergrund: linearer Farbverlauf (-45 Grad, transparent 15 Pixel, #58a 0), linearer Farbverlauf (45 Grad, transparent 15 Pixel, #655 0);

Dies funktioniert jedoch nicht. Standardmäßig nehmen beide Farbverläufe die gesamte Fläche des Elements ein, sodass sie sich gegenseitig verdecken. Wir müssen sie verkleinern, indem wir jedes Element auf die Hälfte mit der Hintergrundgröße beschränken:
Hintergrund: #58a;

Hintergrundgröße: 50 % 100 %

Das Ergebnis seht ihr im Bild.

Obwohl wir eine Hintergrundgröße angewendet haben, überlappen sich die Farbverläufe immer noch. Der Grund dafür ist, dass wir vergessen haben, die Hintergrundwiederholung zu deaktivieren, sodass jeder Hintergrund zweimal wiederholt wird. Folglich verdeckt immer noch einer der Hintergründe den anderen, diesmal jedoch aufgrund von Wiederholungen. Eine neue Version Code sieht so aus:
Hintergrund: #58a;
Hintergrund: linearer Farbverlauf (-45 Grad, transparent 15 Pixel, #58a 0) rechts, linearer Farbverlauf (45 Grad, transparent 15 Pixel, #655 0) links;
Hintergrundgröße: 50 % 100 %

Das Ergebnis seht ihr auf dem Bild und könnt euch vergewissern, dass es so ist – endlich! - Funktioniert! Sie haben wahrscheinlich bereits erraten, wie Sie diesen Effekt auf alle vier Ecken anwenden können. Sie benötigen vier Farbverläufe und Code wie den folgenden:

Hintergrund: #58a;
Hintergrund: linearer Farbverlauf (135 Grad, transparent 15 Pixel, #58a 0) oben links,

linearer Farbverlauf (-135 Grad, transparent 15 Pixel, #655 0) oben rechts,

linearer Farbverlauf (-45 Grad, transparent 15 Pixel, #58a 0) unten rechts,

linear-gradient(45deg, transparent 15px, #655 0) unten links;
Hintergrundgröße: 50 % 50 %;
Hintergrundwiederholung: keine Wiederholung;

BERATUNG
Wir haben verschiedene Farben (#58a und #655) verwendet, um das Debuggen zu erleichtern. In der Praxis haben beide Farbverläufe die gleiche Farbe.
Das Problem mit dem vorherigen Code besteht jedoch darin, dass er schwer zu warten ist. Für die Änderung sind fünf Bearbeitungen erforderlich Hintergrundfarbe und vier, um den Winkelwert zu ändern. Ein mit einem Präprozessor erstelltes Mixin könnte die Anzahl der Wiederholungen reduzieren. So würde dieser Code in SCSS aussehen:
SCSS
@mixin abgeschrägte Ecken($bg,
$tl:0, $tr:$tl, $br:$tl, $bl:$tr) (
Hintergrund: $bg;
Hintergrund:
linear-gradient(135deg, transparent $tl, $bg 0)
oben links,
linear-gradient(225deg, transparent $tr, $bg 0)
oben rechts,
linearer Gradient (-45 Grad, transparent $br, $bg 0)
unten rechts,
linear-gradient(45deg, transparent $bl, $bg 0)
unten links;
Hintergrundgröße: 50 % 50 %;
Hintergrundwiederholung: keine Wiederholung;
}

Bei Bedarf kann es dann wie unten gezeigt mit 2–5 Argumenten aufgerufen werden:
SCSS
@include abgeschrägte Ecken(#58a, 15px, 5px);
In diesem Beispiel erhalten wir am Ende ein Element, dessen obere linke und untere rechte Ecke um 15 Pixel und dessen obere rechte und untere linke Ecke um 5 Pixel beschnitten sind, ähnlich wie der Randradius funktioniert, wenn wir weniger angeben als vier Werte. Dies ist möglich, weil wir uns in unserem SCSS-Mixin auch um Standardwerte für Argumente kümmern – und ja, diese Standardwerte können sich auch auf andere Argumente beziehen.
PROBIEREN SIE ES SELBST!
http://play.csssecrets.io/bevel-corners-gradients

Ein großartiges Beispiel für die Verwendung geschwungener Ecken auf der Website http://g2geogeske.com. Der Designer hat sie zum Herzstück des Designs gemacht: Sie sind in der Navigation, im Inhalt und sogar in der Fußzeile präsent.
Mit einer Variation der Verlaufsmethode können Sie gebogene Schnittecken erstellen, ein Effekt, den viele „Innenrandradius“ nennen, weil er wie eine umgekehrte Version aussieht. abgerundete Ecken. Der einzige Unterschied besteht in der Verwendung radialer statt linearer Farbverläufe:
Hintergrund: #58a;
Hintergrund: radialer Farbverlauf (Kreis oben links, transparent 15 Pixel, #58a 0) oben links,

radial-gradient(Kreis oben rechts, transparent 15px, #58a 0) oben rechts,

radial-gradient(Kreis unten rechts, transparent 15px, #58a 0) unten rechts,

radial-gradient(Kreis unten links, transparent 15px, #58a 0) unten links;
Hintergrundgröße: 50 % 50 %;
Hintergrundwiederholung: keine Wiederholung;

Genau wie bei der vorherigen Technik kann die Größe der Ecke durch die Positionen der Farbübergangsgrenzen gesteuert werden, und das Mixin kann diesen Code für die weitere Wartung besser geeignet machen.

PROBIEREN SIE ES SELBST!
http://play.csssecrets.io/scoop-corners

Die farbverlaufsbasierte Lösung funktioniert zwar, weist jedoch einige Nachteile auf:
Der Code ist sehr lang und voller Wiederholungen. Im häufigsten Fall, wenn wir alle vier Ecken um den gleichen Betrag kürzen müssen, erfordert die Änderung dieses Betrags vier Änderungen im Code.

Ebenso erfordert das Ändern der Hintergrundfarbe ebenfalls vier Bearbeitungen, und wenn Sie eine Fallback-Lösung hinzufügen, dann alle fünf; Das Animieren einer Änderung der Größe einer abgeschnittenen Ecke ist unglaublich schwierig und in manchen Browsern sogar unmöglich. Glücklicherweise können wir je nach gewünschtem Ergebnis noch ein paar weitere Methoden anwenden. Eine davon besteht darin, das Randbild mit dem Inline-SVG-Code zu kombinieren, der die Ecken generiert.

Können Sie sich bereits vorstellen, wie der erforderliche SVG-Code aussehen sollte, wenn Sie wissen, wie „Border-Image“ funktioniert (wenn Sie dieses Wissen auffrischen möchten, finden Sie hier einen Hinweis)?

Da Gesamtabmessungen für uns nicht wichtig sind (border-image kümmert sich um die Skalierung und SVG-Bilder skalieren unabhängig von den Abmessungen perfekt – Vektorgrafiken seien gesegnet!), können alle Abmessungen auf eins gesetzt werden, um mit bequemeren und kürzeren Werten zu arbeiten . Der Schnittwinkelwert ist gleich eins und die geraden Seiten sind ebenfalls gleich eins. Ergebnis (zur besseren Lesbarkeit vergrößert). Der dafür erforderliche Code ist unten dargestellt:
Rand: 15 Pixel durchgehend transparent;

\
\
’);

Beachten Sie, dass die Slicing-Schrittgröße 1 beträgt. Es bedeutet nicht 1 Pixel; die tatsächliche Größe wird durch das Koordinatensystem der SVG-Datei bestimmt (deshalb haben wir keine Einheiten). Wenn wir Prozentsätze verwenden würden, müssten wir 1/3 des Bildes mit einem Bruchwert annähern, beispielsweise 33,34 %. Es ist immer riskant, auf Näherungswerte zurückzugreifen, da in verschiedene Browser Werte können mit unterschiedlicher Genauigkeit gerundet werden. Und indem wir uns an die Koordinatensystemeinheiten der SVG-Datei halten, ersparen wir uns den Ärger, der mit all dem Runden einhergeht.

Wie Sie sehen können, sind die abgeschnittenen Ecken vorhanden, der Hintergrund jedoch nicht. Dieses Problem kann auf zwei Arten gelöst werden: entweder den Hintergrund definieren oder hinzufügen Stichwort Füllen Sie die Border-Image-Deklaration aus, damit das mittlere Slicing-Element nicht verworfen wird. In unserem Beispiel würden wir lieber einen separaten Hintergrund definieren, da diese Definition auch als Workaround für Browser dient, die diese Lösung nicht unterstützen.

Darüber hinaus ist Ihnen wahrscheinlich aufgefallen, dass die abgeschnittenen Ecken jetzt kleiner sind als bei der vorherigen Technik, was verwirrend sein kann. Immerhin haben wir die Rahmenbreite auf 15 Pixel eingestellt! Der Grund dafür ist, dass in der Gradientenlösung diese 15 Pixel entlang der Gradientenlinie gemessen wurden, die senkrecht zur Richtung des Gradienten verläuft. Allerdings wird die Rahmenbreite nicht diagonal, sondern horizontal/vertikal gemessen.

Spüren Sie, wohin ich führe? Ja, ja, wieder der allgegenwärtige Satz des Pythagoras, den wir aktiv genutzt haben. Das Diagramm in der Abbildung soll die Situation verdeutlichen.

Kurz gesagt, um das gleiche visuelle Ergebnis zu erzielen, benötigen wir eine Rahmenbreite, die doppelt so groß ist wie die, die wir bei der Verlaufsmethode verwenden würden. In diesem Fall wird es ein Pixel sein, was am sinnvollsten ist, wenn man sich an 20 Pixel annähert, es sei denn, wir stehen vor der Aufgabe, die Diagonale so nah wie möglich an die begehrten 15 Pixel heranzuführen:

border-image: 1 url('data:image/svg+xml,\
\
\
’);
Hintergrund: #58a;
Wie Sie sehen, entspricht das Ergebnis jedoch nicht ganz unseren Erwartungen.

Wo sind unsere mühsam vorgenommenen Abstriche geblieben? Fürchte dich nicht, junger Padawan, die Ecken sind immer noch da. Sie werden sofort verstehen, was passiert ist, wenn Sie eine andere Hintergrundfarbe einstellen, zum Beispiel #655.
Wie die Abbildung unten zeigt, liegt der Grund für das Verschwinden unserer Ecken im Hintergrund: Der Hintergrund, den wir oben definiert haben, verdeckt sie einfach. Um diese Unannehmlichkeiten zu beheben, müssen wir lediglich den Hintergrundclip verwenden, um zu verhindern, dass der Hintergrund unter den Rahmenbereich kriecht:
Rand: 20 Pixel durchgehend transparent;
border-image: 1 url('data:image/svg+xml,\
\
\
’);
Hintergrund: #58a;

Jetzt ist das Problem gelöst und unser Feld sieht genauso aus wie zuvor. Außerdem können wir dieses Mal die Größe der Ecken ganz einfach mit nur einer Bearbeitung ändern: Passen Sie einfach die Rahmenbreite an. Wir können diesen Effekt sogar animieren, da border-width Animationen unterstützt!

Und das Ändern des Hintergrunds erfordert jetzt zwei statt fünf Bearbeitungen. Da unser Hintergrund außerdem unabhängig vom Eckeneffekt ist, können wir einen Farbverlauf oder ein anderes Muster dafür definieren, solange die Kanten noch #58a sind.

Wir verwenden zum Beispiel radialer Gradient von Farbe hsla(0,0%,100%,.2) bis transparent. Es gibt nur noch ein kleines Problem zu lösen. Wenn „border-image“ nicht unterstützt wird, ist die Ausweichlösung nicht auf das Fehlen von abgeschnittenen Ecken beschränkt. Da der Hintergrund beschnitten wird, verringert sich der Abstand zwischen dem Feldrand und seinem Inhalt. Um dies zu beheben, müssen wir den Rahmen auf dieselbe Farbe einstellen, die wir für den Hintergrund verwenden:
Rand: 20 Pixel durchgezogen #58a;
border-image: 1 url('data:image/svg+xml,\
\
\
’);
Hintergrund: #58a;
Hintergrundclip: Polsterbox;

In Browsern, in denen unsere Border-Image-Definition unterstützt wird, wird diese Farbe ignoriert. Wenn Border-Image jedoch nicht funktioniert, bietet die zusätzliche Border-Farbe eine elegantere Ausweichlösung. Der einzige Nachteil besteht darin, dass mehr Bearbeitungen erforderlich sind, um die Hintergrundfarbe auf drei zu ändern.
PROBIEREN SIE ES SELBST!
http://play.csssecrets.io/bevel-corners

Obwohl die Border-Image-Lösung sehr kompakt ist und den DRY-Prinzipien gut folgt, bringt sie gewisse Einschränkungen mit sich. Beispielsweise sollte unser Hintergrund entweder vollständig oder zumindest an den Rändern mit einer Volltonfarbe gefüllt sein.

Was aber, wenn wir einen anderen Hintergrundtyp verwenden möchten, beispielsweise eine Textur, ein Muster oder einen linearen Farbverlauf? Es gibt eine andere Methode, für die solche Einschränkungen nicht gelten, obwohl ihre Verwendung natürlich gewissen Einschränkungen unterliegt.

Erinnern Sie sich an die Clip-Path-Eigenschaft aus dem Buch „How to Make a Diamond Secret?“ CSS-Beschneidungspfade haben eine erstaunliche Eigenschaft: Sie ermöglichen es Ihnen, Prozentwerte (die wir verwenden, um die Gesamtabmessungen eines Elements anzugeben) mit absoluten Werten zu mischen, was eine unglaubliche Flexibilität bietet. Der Code für einen Beschneidungspfad, der ein Element auf die Form eines abgeschrägten 20-Pixel-Rechtecks ​​(horizontal gemessen) zuschneidet, sieht beispielsweise so aus:
Hintergrund: #58a;
Clip-Pfad: Polygon(
20px 0, calc(100% - 20px) 0, 100% 20px,
100 % berechnet (100 % – 20 Pixel), berechnet (100 % – 20 Pixel) 100 %,
20px 100%, 0 calc(100% - 20px), 0 20px);
Obwohl dieser Codeausschnitt kurz ist, folgt er nicht den DRY-Prinzipien und wird zu einem der größten Probleme, wenn Sie keinen Präprozessor verwenden. Tatsächlich ist dieser Code die beste Veranschaulichung des WET-Prinzips aller Lösungen reines CSS in diesem Buch vorgestellt, denn um die Größe der Ecke hier zu ändern, müssen Sie bis zu acht (!) Änderungen vornehmen.

Andererseits kann der Hintergrund mit nur einer Bearbeitung geändert werden, also haben wir zumindest das. Einer der Vorteile dieses Ansatzes besteht darin, dass wir absolut jeden Hintergrund oder sogar Ersatzelemente wie Bilder verwenden können. Die Abbildung zeigt ein mit abgeschnittenen Ecken stilisiertes Bild. Keine der bisherigen Methoden kann einen solchen Effekt erzielen. Darüber hinaus unterstützt die Clip-Pfad-Eigenschaft die Animation, und wir können nicht nur die Änderung der Eckengröße, sondern auch den Übergang zwischen verschiedenen Formen animieren.

Sie müssen lediglich einen anderen Beschneidungspfad verwenden. Der Nachteil dieser Lösung besteht nicht nur darin, dass sie ausführlich ist und nur eine eingeschränkte Browserunterstützung bietet, sondern auch darin, dass der Text abgeschnitten wird, wenn wir nicht auf eine ausreichend breite Auffüllung achten, da beim Abschneiden eines Elements dessen Bestandteile nicht berücksichtigt werden in irgendeiner Weise. Im Gegensatz dazu ermöglicht die Verlaufsmethode, dass der Text einfach über die abgeschnittenen Ecken hinausragt (da diese nur Teil des Hintergrunds sind), während die Rahmenbildmethode genauso funktioniert wie normale Ränder und den Text in eine neue Zeile umschließt.

PROBIEREN SIE ES SELBST!
http://play.csssecrets.io/bevel-corners-clipped

Zukünftige Abstriche
In Zukunft müssen wir nicht mehr auf CSS-Verläufe, Clipping oder SVG zurückgreifen, um den Cut-Ecken-Effekt zu erzielen. Die neue Eigenschaft „corner-shape“, die Teil von CSS Backgrounds & Borders Level 4 ist, wird uns dieses Problem ersparen. Sie wird verwendet, um in Kombination mit der Eigenschaft border-radius den Effekt von abgeschnittenen Ecken in verschiedenen Formen zu erzeugen wird benötigt, um den Umfang des Zuschnitts zu bestimmen. Um beispielsweise 15 Pixel große abgeschnittene Ecken auf allen Seiten eines Bildes zu beschreiben, würde dieser einfache Code ausreichen:

Randradius: 15px;
Eckform: abgeschrägt;