Ich möchte ein Rechteck (vorzugsweise ohne Verwendung von Leinwand oder Hintergrundbildern), die in etwa wie die blaue Box in dem Bild unten aussieht. Beachten Sie, dass die Form unregelmäßige Kanten hat.Unregelmäßige Rechteckform
Wie kann ich es erreichen?
div {
background: blue;
width: 400px;
height: 120px;
}
Sie sind für CSS Masking suchen und Formen Module
hier Dig: CSS Masking on html5rocks.com
Auch hier ist eine gute Erklärung mit Anwendungsfälle: Creating Non-Rectangular Layouts With CSS Shapes
Sie können Erstellen Sie eine beliebige Form, wenden Sie sie auf alles an, was Sie wollen: Bild, Hintergrund, Text, ein anderes Formular - keine Grenzen. Außerdem können Sie es animieren!
Und hier ist ein guter Service, solche Dinge mit der Maus zu beschneiden: http://bennettfeely.com/clippy/
Hinweis, dass nicht jeder Browser, dass zur Zeit unterstützen kann: http://caniuse.com/css-clip-path/embed
Und ja, kein SVG oder Bilder benötigt - flexibel , dynamischer, CSS-einziger Trick.
.box{
width: 400px; height: 120px; background:black; position:relative
}
.poly{
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background:#2abcd0;
-webkit-clip-path:polygon(6% 13%, 24% 13%, 36% 12%, 53% 12%, 61% 12%, 65% 13%, 76% 12%, 95% 10%, 95% 44%, 96% 88%, 80% 86%, 69% 86%, 65% 88%, 46% 88%, 21% 88%, 6% 89%, 5% 86%, 5% 80%, 5% 40%, 5% 16%);
clip-path: polygon(6% 13%, 24% 13%, 36% 12%, 53% 12%, 61% 12%, 65% 13%, 76% 12%, 95% 10%, 95% 44%, 96% 88%, 80% 86%, 69% 86%, 65% 88%, 46% 88%, 21% 88%, 6% 89%, 5% 86%, 5% 80%, 5% 40%, 5% 16%);
}<div class="box">
<div class="poly"></div>
</div>Und ohne Blackbox:
.poly{
width:400px;
height:120px;
background:#2abcd0;
-webkit-clip-path:polygon(6% 13%, 24% 13%, 36% 12%, 53% 12%, 61% 12%, 65% 13%, 76% 12%, 95% 10%, 95% 44%, 96% 88%, 80% 86%, 69% 86%, 65% 88%, 46% 88%, 21% 88%, 6% 89%, 5% 86%, 5% 80%, 5% 40%, 5% 16%);
clip-path: polygon(6% 13%, 24% 13%, 36% 12%, 53% 12%, 61% 12%, 65% 13%, 76% 12%, 95% 10%, 95% 44%, 96% 88%, 80% 86%, 69% 86%, 65% 88%, 46% 88%, 21% 88%, 6% 89%, 5% 86%, 5% 80%, 5% 40%, 5% 16%);
}<div class="poly"></div>Aktualisierter Code, der besser zu Ihrem Rechteck passt – iXCray
Danke. Was ist, wenn ich die Box nicht möchte? nur das Blau. – user2952238
Dann nicht die Box verwenden, Snippet hinzugefügt – iXCray
Divs sind und immer rechteckig gewesen. Sie können jedoch einige komplizierte Formen erstellen, wenn Sie die Zeit haben, sie mithilfe von Koordinaten individuell zu verfolgen. Eine Liste der Formen, die Sie einfach zusammenstellen können, finden Sie unter this page. Mit diesen Ideen können Sie Ihre eigenen komplizierteren Formen erstellen.
Sie am Ende mit etwas kann wie ...
shape-outside: polygon(170.67px 291.00px,126.23px 347.56px,139.79px 417.11px,208.92px 466.22px,302.50px 482.97px,343.67px 474.47px,446.33px 452.00px,443.63px 246.82px,389.92px 245.63px,336.50px 235.26px,299.67px 196.53px,259.33px 209.53px,217.00px 254.76px);
prüfen diese tutorial als gut. Sie spricht über shapses to poly ein Werkzeug, das den Prozess der Herstellung von benutzerdefinierten Formen viel leichter zu handhaben macht.
Sie haben feste Punkte, das ist nicht gut für die Skalierung – iXCray
Ich demonstrierte nur die Idee, (Ich zog tatsächlich diesen Ausschnitt von jemand Website) Die Idee ist immer noch, was wichtig ist, und Sie können es konvertieren zu einem skalierbaren Modell, wie Sie benötigen. – DMrFrost
Endlich jemand, der die Frage tatsächlich liest. Vielen Dank! werde ich darauf eingehen. – user2952238
Was genau ist das Problem, mit dem Sie konfrontiert werden oder die Frage, die Sie stellen möchten, weil alles, was Sie getan haben, ist, uns zu sagen, was Sie versuchen zu tun. – csmckelvey
Kühl. Dann mach es :) –
Das Problem ist, dass ich keine Ahnung habe, wo ich anfangen soll. Ich möchte nicht Hintergrundbilder verwenden - – user2952238