Wie erstellen Sie ein div mit einer Diagonale (oder abgewinkelt) top line
Ich bin ein Neuling auf CSS3 und alles, was ich weiß, ist selbst-gelernt, Lesen Sie Jungs oder andere tutorials, die so nach Stunden der recherche und trial-error, ich könnte wirklich deine Hilfe gebrauchen :(.
Ich versuche zu drehen, NUR die oberste Zeile einer div. Dies ist, was ich getan habe so weit:
http://blanc-design.com/sigma2/
In der Fußzeile habe ich drehen Sie zwei divs zu erstellen, die Wirkung. Aber, was ich tun will, ist haben einen geraden unteren Linie auf dem grün div. Dies ist ein Beispiel, wie ich es gerne hätte:
http://blanc-design.com/sigma2/ex.jpg
Ich weiß nicht, wenn ich mich zu erklären, mich Recht. Dies ist der CSS code, den ich verwendet habe, zu drehen, die divs:
#footer-top {
color: #fff;
padding: 35px 0 15px;
transform: rotate(2deg) scale(1) skew(3deg) translate(0px);-webkit-transform: rotate(2deg) scale(1) skew(3deg) translate(0px);-moz-transform: rotate(2deg) scale(1) skew(3deg) translate(0px);-o-transform: rotate(2deg) scale(1) skew(3deg) translate(0px);-ms-transform: rotate(2deg) scale(1) skew(3deg) translate(0px);
}
#footer-space {
padding: 0 0 6px;
}
#footer-top2 {
color: #fff;
background-color: rgba(20, 122, 188, 0.5);
background: rgba(20, 122, 188, 0.5);
color: rgba(20, 122, 188, 0.5);
padding: 6px 0 12px;
height: 2px;
transform: rotate(358deg) scale(1) skew(0deg) translate(0px);-webkit-transform: rotate(358deg) scale(1) skew(0deg) translate(0px);-moz-transform: rotate(358deg) scale(1) skew(0deg) translate(0px);-o-transform: rotate(358deg) scale(1) skew(0deg) translate(0px);-ms-transform: rotate(358deg) scale(1) skew(0deg) translate(0px);
}
#footer-top3 {
color: #fff;
background-color: rgba(128, 185, 46, 0.7);
background: rgba(128, 185, 46, 0.7);
color: rgba(128, 185, 46, 0.7);
transform: rotate(358deg) scale(1) skew(-2deg) translate(0px);
-webkit-transform: rotate(358deg) scale(1) skew(-2deg) translate(0px);
-moz-transform: rotate(358deg) scale(1) skew(-2deg) translate(0px);
-o-transform: rotate(358deg) scale(1) skew(-2deg) translate(0px);
-ms-transform: rotate(358deg) scale(1) skew(-2deg) translate(0px);
}- Und dies ist der HTML:
<div id="footer-top2"></div>
<div id="footer-space"></div>
<div id="footer-top3">
<div id="footer-top">
<div class="container clearfix">
<div class="one-fourth">
<div class="widget twitter-widget">
<h3>Últimos Tweets</h3>
<div class="tweet"></div>
</div>
</div>
<div class="one-fourth">
<div class="widget twitter-widget">
<h3> Facebook Feed</h3>
<div class="tweet"></div>
</div>
</div>
<div class="one-fourth">
<div class="widget twitter-widget">
<h3>Fotos en Instagram</h3>
<div class="tweet"></div>
</div>
</div>
<div class="one-fourth column-last">
<div class="widget contact-info">
<h3>Contacto</h3>
<div>address here
</div>
</div>
</div>
</div>
</div>
</div>Wenn einer von Euch mir helfen könnte werde ich sehr dankbar sein!!
Vielen Dank im Voraus.
b.
- Sie können nicht drehen Sie den Rand ein element, unabhängig von dem element selbst.
- Dies, SO Frage helfen könnte (besonders die Kommentare zu der letzten Antwort - jsfiddle.net/py9Ze/2): stackoverflow.com/questions/17595097/css-border-rotation
Du musst angemeldet sein, um einen Kommentar abzugeben.
Zuerst dachte ich, das getan werden könnte, mit CSS-Dreiecke, aber ich kann nicht so Recht geklappt, wie man eine nach unten rechts zeigendes Dreieck werden 100% der Breite, also ging ich zu einer anderen option...
Konnte Sie halten mit dem drehen-Technik, wie Sie tun, aber dann fügen Sie etwas Polsterung auf den unteren grünen Teil, und dann mit einem negativen margin-bottom bringen die Fußzeile wieder auf und über der diagonalen. Wenn Sie dann legen Sie die Fußzeile, um die relative, sollte es sitzen über der Spitze der grünen, so dass Sie nicht sehen, dass die Diagonale Linie.
Getestet habe ich diese auf der eigentlichen Website und gefunden, dass ich brauchen, um die Polsterung an den
containerinnenfooter-topund die negative Marge auffooter-top. Ansonsten ist die Polsterung würde dadurch eine Lücke an der Unterseite des Körpers.Schwer mit Worten zu beschreiben, also hier das snippet.
CSS:
HTML:
Könnten Sie versuchen, dies zu erreichen mit einer css-Farbverlauf. Ich tun etwas ähnliches auf meiner website splashpage :
http://agency89ninety.com
Des abgewinkelten hintergrund auf der oben genannten Website ist rein CSS3 gradients (mit fallbacks natürlich)
Dies ist durch das anlegen eines Gradienten, beginnend bei 0% mit einer Farbe, die von GRAU, endend bei 50% mit einer Farbe, die von GRAU, dann ab ein weiterer gradient auf 50% mit einer Farbe von DUNKELGRAU und endend bei 100% mit einer Farbe DARKGREY auch.
Grundsätzlich sind Sie trickst das system. Es ist technisch eine Steigung, aber sieht aus wie zwei Farben, die in der Mitte treffen und sind abgewinkelt.
Werfen Sie einen Blick auf diese Website zu lernen Sie mehr über die Eigenschaften der css-Farbverlauf:
http://www.css3files.com/gradient/