Sind CSS-Formen schon Realität?

Question

Ich finde immer wieder Websites über CSS-Formen; wo die Idee ist, dass anstelle von rechteckig kann ich CSS verwenden, um Texte zu erstellen, die eine Reihe von Formen wie kreisförmig nehmen. Aber die Websites, die ich finde, haben Codes, die nicht funktionieren. Und wenn ich mir dann ihren eigenen Quellcode anschaue (da sie die Beispiele auf ihrer eigenen Website haben), stellt sich heraus, dass alle Beispiele, die sie haben, Bilder sind - im Gegensatz zu echtem Code. Also frage ich hier. Ist diese CSS-Form schon real? Ich möchte einen Text in einem Halbkreis darstellen. So entdecke ich CSS-Shapes.

Answer 1

einen Halbkreis erstellen können Sie ein <div> Element und Stil es mit Grenzradius, so etwas wie dies erstellen:

#semicircle { 
    width: 200px; 
    height: 100px; 
    border-radius: 100px 100px 0 0; 
    background: green; 
} 

Dann können Sie einfach einfügen, wenn Sie in ihm einen Text setzen wollen eine <span> drin , so dass die HTML wird wie folgt aussehen:

<div id="semicircle"> 
    <span>Some text</span> 
</div> 

und dann den Textstil zu positionieren, wo Sie innerhalb der übergeordneten wollen <div>.

Answer 2

Ja und nein. "Echte" CSS-Formen werden noch nicht von einer Vielzahl von Browsern unterstützt.

Siehe http://caniuse.com/#feat=css-shapes

Aber ein Kreis kann auch durch Zugabe abgerundeten Ecken zu einem Element bestehen, das von allen gängigen Browsern, einschließlich Internet Explorer 9 unterstützt wird.

Siehe: http://caniuse.com/#feat=border-radius

Also, wenn Sie diese brauchen auch in IE8 zu arbeiten, können Sie Text in einem Kreis in reinem CSS hinzufügen. Und für IE8 wird der Text genauso gut angezeigt, nur in einem Quadrat oder Rechteck anstelle eines Kreises, so dass dies ein akzeptabler Fallback für Sie sein könnte.

Sie haben keine bestimmte Website genannt, aber Webseiten über Web-Entwicklung werden oft Artikel über neue Funktionen haben, die möglicherweise noch nicht (oder nicht umfassend) unterstützt werden, weshalb sie auch Bilder haben können, um was zu zeigen es wird aussehen, sobald es verfügbar ist.

Wie Niet der Dunkle Absolu in den Kommentaren darauf hingewiesen, umhüllt die border-radius Lösung den Text eigentlich nicht in einem Kreis. Der Text verhält sich so, als wäre das Element immer noch rechteckig. Wenn Sie den Text der Kreisform folgen lassen müssen und Unterstützung für die aktuelle Generation von Browsern benötigen, benötigen Sie die Hilfe von JavaScript. Die TextMorph library scheint den Trick zu machen. Ich habe es einfach gegoogelt, also habe ich keine Erfahrung damit, aber es sieht vielversprechend aus.