Tag: css-shapes
CSS-Shapes sind durch die Verwendung von Cascade-Styling Sheets, um HTML-Elemente zu Formen und Bilder. Die grundlegenden Formen sind Dreiecke, Quadrate und Kreise, aber kann gemacht werden in mehr Voraus Formen, wie Herzen, Achtecke und Sterne.
Wie zu verwenden neigen nur in der parent-element?
4 Antworten
Gibt es eine Möglichkeit zu nutzen, neigen die nur in einem übergeordneten element? Ich muss etwas schaffen wie ein "Diamant", wie eine Maske und die untergeordneten Elemente können nicht beeinflusst werden. Es gibt keine Möglichkeit, in diesem
Wie, um eine glatte gestrichelte Grenze rotation animation wie "marching ants'
4 Antworten
Arbeite ich an einer css-animation mit 'Zahnräder und Ketten", aber bin nicht in der Lage zu schaffen, eine 'glatte' border rotation. Können Sie sehen, in diesem fiddle Wie (derzeit) bin ich mit einem pseudo-element zum generieren einer
Wie erstellen fluid Trapez-Bild mit css?
3 Antworten
Ich arbeite an einer website, auf die wir verwenden parallax-Effekt. In diesem gibt es einige Bilder, die sind dreieckig, wie dies & das Bild ist transparent, da es überschneidungen der oben DIV. Ich versuche so viele Dinge
zwei divs split mit diagonalen Linie - CSS
1 Antworten
Ich versuche, zwei divs passen sich die volle Breite der Seite, aber in zwei Hälften geteilt, mit einer diagonalen Linie. Wie kann ich erreichen, das mit zwei divs über CSS? es ist ein slider und muss den
Wie man diesen Pfeil in CSS?
4 Antworten
Baue ich eine wizard-ähnliche Bestellvorgang, wo ich dieses Menü: Die aktive Seite ist grün gefärbt (in diesem Fall Model). Wie macht man diesen Pfeil mit nur CSS?: Im moment bin ich das erreichen meines Ziel mit mehreren
Wie erstellen Sie eine Form mit text in CSS3, SVG oder HTML(5)?
2 Antworten
Brauche ich zum erstellen einer HTML-Seite wie in der folgenden Abbildung dargestellt. Ich weiß nicht, wie man erstellen Sie klickbare Formen mit text. Der text soll nicht ein Bild sein und nicht größer als seine Fläche (wie
Pfeil-Anzeige CSS auf verschiedenen Registerkarten
3 Antworten
Habe ich bemerkt, dass viele Webseiten geben die Seite oder den tab, den Sie auf von mit so etwas wie dieses: Wie Sie sehen können, gibt es einen kleinen Pfeil, der angibt, die Seitenzahl. Wie kann dies
Wie, um eine Kante des Sechsecks durch die Verwendung von CSS
5 Antworten
Dies ist mein CSS. CSS #hexagon-circle { width: 100px; height: 55px; background: red; position: relative; border-radius: 10px;} #hexagon-circle:before { content: ""; position: absolute; top: -25px; left: 0; width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px
Responsive Kreis mit zentriertem Inhalt
2 Antworten
Gibt es eine Möglichkeit, das folgende zu machen: CSS: #id { border-radius: 100px; width: 100px; height: 100px; } HTML: <div id="circle"> <h3>Hello</h3> </div> Einen Runde div mit dem text vertikal zentriert und horizontal. Zur gleichen Zeit halten
Form mit einer schrägen Seite (responsive)
2 Antworten
Ich versuche, um eine Form zu erstellen, wie im Bild unten mit einem abgeschrägte Kante nur auf einer Seite (zum Beispiel der Unterseite), während die anderen Kanten gerade bleiben. Ich habe versucht, über die Grenze der Methode
Erstellen von s-förmige Kurve mit css
3 Antworten
Ich möchte erstellen Sie eine Kurve, wie unten dargestellt mit css. Ich war versucht, so etwas wie dieses: CSS: .curve { background-color: #8aa7ca; height: 65px; width: 160px; -moz-border-radius-bottomright: 25px 50px; border-bottom-right-radius: 25px 50px; } HTML: <div class="curve">
How to create-cube-nur mit HTML und CSS?
8 Antworten
Habe ich dies und das möchte ich , dass ein Würfel mit HTML & CSS nur wie im Bild oben. Meine beste versuchen: CSS: .mainDiv{ position: relative; width: 206px; height: 190px; margin: 0px auto; margin-top:100px; } .square{
Dreieck im CSS innerhalb einer box
1 Antworten
Naja, ich weiß nicht, wie zu erklären, es richtig. Hier, schauen Sie in diesem screenshot hat, was ich machen will. Meine designer Gaben mir diese. Wenn ich nicht eine Lösung finde werde ich die Bilder benutzen und
Spitz/abgewinkelt Pfeil-Stil die Grenzen von CSS
3 Antworten
Ich habe ein breadcrumb-Menü und versuchen, es zu tun in reinem CSS, damit ich nicht in ein hintergrund-Bild, um einen Pfeil-Form. Ist es möglich, dies zu erreichen, abgewinkelt border-style mit reinem CSS? Die besten, die ich in
Pixelige Kante um einen CSS-Kreis mit overflow: hidden;
5 Antworten
Hier ist die JSFIDDLE für meine Katze/animation /ohne drop-shadows zu zeigen, dass das problem so klar wie ich kann. Nach meinem Verständnis ist dies verursacht durch die border-radius und möglicherweise aufgrund overflow: hidden;. Die Eule ist nicht
Platz DIV, wo die Höhe gleich viewport
8 Antworten
Muss ich erstellen Sie ein DIV, wo width=height, und height=100% des Viewports (der natürlich variabel ist). In anderen Worten, eine perfekt quadratische DIV berechnet es die Abmessungen basierend auf der Höhe des Viewports. Elemente innerhalb dieser DIV
Border-radius in Prozent (%) oder Pixel (px) oder em
3 Antworten
Wenn ich einen pixel-oder em-Wert für border-radius, der Kantenradius ist immer eine Kreisbogen oder eine Pille Form, auch wenn der Wert größer ist als die größte Seite des Elements. Wenn ich Prozentsätze, der Kantenradius ist elliptisch und
Transparente Pfeil/Dreieck eingerückt
3 Antworten
Ich würde gerne eine transparente Pfeil auf ein Bild. Dieses Dreieck sollte eingerückt werden in einem semi-transparenten block und zeigen Sie das Hintergrundbild. Gewünschte Ausgabe: CSS: .barShow { background-color: #000; opacity: 0.5; } .barShow:before { top: 0%;
Wie man ein Feld mit Pfeil in CSS?
7 Antworten
Wie man ein Feld mit Pfeil in CSS? Herstellung der Runden Ecke ist einfach. aber jede Idee, um den Pfeil auf der linken Seite, ohne mit Bild. Ist es möglich, möglich, mit nur ein Elemente <p>....</p> CSS:
Gewellte Form mit css
6 Antworten
Ich bin versuchen, neu zu erstellen das image mit CSS: Ich würde nicht brauchen, es zu wiederholen. Dies ist, was ich begann, aber es muss einfach eine gerade Linie: CSS: #wave { position: absolute; height: 70px; width:
Dreieck mit einer abgerundeten Ecke
5 Antworten
Möchte ich nur eine abgerundete Ecke eines Dreiecks mit aber ich bin nicht in der Lage, es zu machen. Hier ist mein code: CSS: .arrow-left { width: 0; height: 0; border-top: 80px solid transparent; border-bottom: 80px solid
Schweben und klicken Sie auf CSS-Dreieck
4 Antworten
Ich habe ein Dreieck mit einer javascript-Funktion, bewegt sich das Bild. Das Problem ist, dass das element hat eine quadratische Form, so Klick und hover-Zustand ausgelöst werden, außerhalb des Dreiecks (siehe Roter Rahmen im folgenden Bild) :
Dreieck-Form mit Hintergrundbild
4 Antworten
Arbeite ich an einem Projekt, dass Anrufe für zwei Dreiecke zu halten, hintergrund-Bilder und links. Hier ist mein mock-up, wie ich möchte, dass die beiden Dreiecke. Derzeit habe ich einfach zwei divs, die sich über die 900x600
Wie zeichnet man einen Kreis-Sektor in CSS?
12 Antworten
Gut, zeichnen Sie einen Kreis mit reinem CSS ist einfach. .circle { width: 100px; height: 100px; border-radius: 100px; border: 3px solid black; background-color: green; } Wie erstelle ich einen Sektor? Bis zu einem gewissen Grade X [0-360]
Sprechblase mit Pfeil
3 Antworten
Habe ich ein Projekt wo ich das einfügen muss Sprechblasen /message-Boxen. Die Allgemeine Form, ich bin versucht, zu erreichen, ist diese : CSS: .bubble { height: 100px; width: 200px; border: 3px solid gray; background: lightgray; position: relative;
Kontrolle der gestrichelten Begrenzungslinie Länge und Abstand zwischen den Strichen
4 Antworten
Ist es möglich, die Steuerung der Länge und der Abstand zwischen den gestrichelten Umrandung Striche in CSS? In diesem Beispiel unten zeigt anders zwischen Browsern: CSS: div { border: dashed 4px #000; padding: 20px; display: inline-block; }
Zeichnen Sie Hälfte des Kreises mit CSS-oder SVG-Format
2 Antworten
Ich bin auf der Suche nach einem Weg zu zeichnen, den unteren Teil dieses Kreises mit CSS-oder SVG-Format. Ich habe gesehen, diese Antwort aber es befasst sich mit einem perfekten Halbkreis, obwohl ich ein zusätzliches segment abgeschnitten,
Wie teilen Sie einen Kreis in 12 gleiche Teile, die mit Farbe mit css3/javascript
4 Antworten
HTML: <?xml version="1.0" encoding="utf-8"?> <html> <head> <title>Circle</title> <link rel="stylesheet" href="stylesheet.css" type="text/css" /> </head> <body> <div class="circle"><p class="innerCircle"></p></div> </body> </html> CSS: .circle { width: 450px; height: 450px; border-top: 30px solid #416fa6; border-right: 30px solid #718242; border-bottom: 30px solid
html-box mit dem Pfeil im inneren
4 Antworten
Einem client angefordert wird, die Boxen auf seiner Webseite, die erscheinen soll, wie das unten wie Sie sehen können, das Feld hat einen kleinen Pfeil mit einer einzigartigen Form auf der linken Seite. Ich habe alles versucht
Responsive CSS Dreieck mit Prozenten Breite
6 Antworten
Den folgenden code erstellen Sie einen Pfeil rechts unten ein <a> element: JSFiddle CSS: .btn { position: relative; display: inline-block; width: 100px; height: 50px; text-align: center; color: white; background: gray; line-height: 50px; text-decoration: none; } .btn:after {
HTML-und CSS-Fluid-Kreis
6 Antworten
Ich bin versuchen, um eine fluid-Kreis mit HTML und CSS. Ich bin fast fertig aber wie sollte es auch flüssig und der Inhalt ist dynamisch, Sie verändert Ihre Form vom Kreis zum oval und andere. CSS: body
CSS Kreis-Maske
2 Antworten
Bin ich suchen, um eine dunkle Maske auf dem Boden einen Kreis enthalten ist, die in der main-Kreis. können Sie dies tun, indem Sie css-Masken? Finden Sie fiddle <div id="profile-pic-wrap"> <div id="profile-pic"> <div class="profile-btn-bg"> <a href="#" class="profile-pic-btn">Change
Transparent (Deckkraft) Bild von oben 0% unten 100% in CSS
6 Antworten
Möglich sein, es zu tun? Nur in CSS, wie dieses Bild, so meine ich, wenn ich auf <div> tag-hintergrund Bild, ich brauche es, um transparent zu sein von oben nach unten. Will ich schaffen, etwas ähnliches wie
Schneiden Bild Diagonal mit CSS
5 Antworten
, Wie Sie abgeschnitten Teil des Bildes im container oder Diagonal mit CSS? Den Teil, der muss weggeschnitten werden, hat die form eines Dreiecks Um genauer zu sein: wenn das Bild oben ist das Bild, das Blaue
erstellen der Zylinder-Form in reinem css 3d
2 Antworten
War ich arbeiten auf Leinwand 3d Formen, die ich bin ganz neu hier. Ich bin versucht, um Reine css3d Zylinder ohne plugin. Hier ist, was ich versuche, und der Ausgang war der code, den ich erhalte Kreis.
Kreis mit zwei Grenzen
4 Antworten
Wie kann ich style a ein Kreis (a div) mit zwei Grenzen effizient, so dass es reagiert auf einen Behälter die Größe? Angenommen Kreisen wie diesem zum Beispiel: Hier ist ein funktionierendes CSS für einen Kreis: CSS:
Hinzufügen von box-shadow zu einem :after-pseudo-element
4 Antworten
Habe ich ein div namens .testimonial-inner und mit der :after pseudo-element habe ich ein Pfeil, der sich unterhalb es nach unten zeigt. Das problem das ich habe ist das hinzufügen eines box-shadow um alles, damit Sie sehen
Wie kann ich das erstellen einer "QuickInfo-Schwanz" mit reinem CSS?
6 Antworten
Ich kam gerade über eine saubere CSS-trick. Check out the fiddle... CSS: .tooltiptail { display: block; border-color: #ffffff #a0c7ff #ffffff #ffffff; border-style: solid; border-width: 20px; width: 0px; height: 0px; } .anothertail { background-image: url(http://static.jqueryfordesigners.com/demo/images/coda/bubble-tail2.png); display: block; height:
CSS-Zick-Zack-Grenze mit einem Strukturierten Hintergrund
3 Antworten
Ich habe einen header mit einem Zick-Zack-Grenze. Ein Weg dies zu tun ist, um Bilder zu machen, die Zick-Zack-Effekt. (1) gibt es eine Möglichkeit zu schaffen, eine praktische cross-browser-Zick-Zack-Grenze in CSS ohne die Verwendung von Bildern? Ich
CSS3: Knochen Form
1 Antworten
Wie man ein Netz mit dem dog bone-format in CSS und/oder jQuery? Die format der Knochen ist dies: Und das Netz würde dann so Aussehen, nur dass anstatt der Sechskantschrauben und der Inhalt (Bild/text) von innen format
Machen Tabellenzellen quadratisch
2 Antworten
How, um sicherzustellen, dass jede Zelle der Tabelle sollte sich Platz ohne die Verwendung von festen Größen? Und reaktionsschnell Weg, wenn Sie ändern die Breite. CSS: table { width: 90%; } td { width: 30%; } tr
Abgerundete Seite, nicht abgerundete Ecken
2 Antworten
Ich würde gerne eine Form erstellen, wie unten angezeigt, ganz in CSS. Wie können Sie sagen, würde es dauern, ein bisschen mehr Feintuning als einfach mit abgerundeten Ecken... Kann es getan werden? css-tricks.com/examples/ShapesOfCSS Es ist immer noch
CSS Progress Circle
3 Antworten
Habe ich danach gesucht, diese website zu finden, progress-bars, aber diejenigen, die ich in der Lage gewesen, zu zeigen animierte Kreise, die gehen, um die vollen 100%. Ich möchte es halt an bestimmte Prozentsätze, wie in der
Pfeil vor und nach einer box mit CSS
1 Antworten
Ich versuche zu schaffen in einer einzigen box, zwei Pfeile, die einen Zeiger und der andere in die box einfach hinter sich. Nicht finden können, den Weg, um den Pfeil direkt hinter ihm. Kann mir jemand helfen??
CSS - Erstellen einer play-Taste
0 Antworten
Habe ich ein jsfiddle hier - http://jsfiddle.net/0nvns9Lj/1/ Ich habe getan, was ich tun müssen, aber nicht wissen, ob es der beste Weg - ich bin sicher, sollte es einfacher sein. Ich brauche und erstellen Sie eine play-Taste,
Sechskant-Form mit CSS3
4 Antworten
Können so ein Sechseck erstellt werden, die mit reinem CSS3? Vielen Dank für jede Hilfe!!! Auf nur einem element? Denke nicht so. Aber wenn Sie mehr Elemente, die Sie können. Nicht nur eine. Jeder Betrag ausreichend sein
Transparent hohl-oder cut-out-Kreis
3 Antworten
Ist es möglich, schneiden den hohlen Kreis mit nur CSS? Dies können wir alle tun: Aber können wir dies tun? Den Kreis muss innen hohl sein und transparent. Das problem ist also nicht gelöst, indem Sie einen
Transparent text Ausschneiden von hintergrund
8 Antworten
Gibt es eine Möglichkeit, um eine transparenten text Ausschneiden von hintergrund Effekt wie in dem folgenden Bild, das mit CSS? Es wäre traurig, Sie zu verlieren alle wertvollen SEO aufgrund von Bildern ersetzen von text. Ich dachte
Runder Prozent Fortschrittsbalken
1 Antworten
Ich würde gerne eine Prozent-Kreis-Anzeige auf meine Website: In diesem Fall zeigt 75%. Wie sollte dies gemacht werden? Ich habe den gelben Kreis in eine image-Datei, aber wenn es einfacher ist, einige, wie, tun Sie es alle
Gewusst wie: hinzufügen-Pfeil und div?
2 Antworten
Ich versuche zu erstellen, Fehler label für div mit Pfeil, aber habe problem mit der Zentrierung. Bekomme ich: Brauche ich etwas wie: HTML: <div class="error-label-arrow"></div> <div class="error-label">This field is required.</div> CSS: div.error-label{ padding: 7px 10px 0 4px;