it-swarm.com.de

Schräge Ecke in der CSS-Box

Ich habe nur kurze Zeit mit CSS gespielt und versuche eine normale Box zu haben, wobei die linke obere Ecke in einem Winkel von 45 Grad abgeschnitten ist. Keine kleine Menge; Ich schaue auf eine recht große Ecke, die in diesem Winkel geschnitten ist. Dieser Effekt:

http://tadesign.net/corner.jpg

Wie soll ich das machen?

20
Mach

Beschreibungen

Slantastic ( http://meyerweb.com/eric/css/Edge/slantastic/demo.html ) unterstützt alte Browser. Für CSS3-spezifische CSS-Polygone sollten Sie Folgendes ausprobieren: http://alastairc.ac/2007/02/dissecting-css-polygons/ .

Code

Das HTML:

<div class="cornered"></div>
<div class="main">Hello</div>

Das CSS:

.cornered {
    width: 160px;
    height: 0px;
    border-bottom: 40px solid red;
    border-right: 40px solid white;
}
.main {
    width: 200px;
    height: 200px;
    background-color: red;
}

Das Ergebnis: http://jsfiddle.net/mdQzH/

Alternativer Code

Um transparente Rahmen und Text im Rahmenbereich zu verwenden ... HTML:

<div class="outer">
<div class="cornered">It's possible to put text up here, too
    but if you want it to follow the slant you have to stack
    several of these.</div>
<div class="main">Hello hello hello hello
hello hello hello hello hello</div>
</div>

Das CSS:

.outer {
    background-color: #ccffff;
    padding: 10px;
    font-size: x-small;
}
.cornered {
    width: 176px;
    height: 0px;
    border-bottom: 40px solid red;
    border-left: 40px solid transparent;
}
.main {
    width: 200px;
    height: 200px;
    background-color: red;
    padding: 0 8px;
}

Das Ergebnis: http://jsfiddle.net/76EUw/2

20
Ray Toal

Dies kann mit svg clip-path erfolgen.

Vorteile:

  1. Arbeite mit einem regulären Div
  2. Keine harten Grenzen, um Formen zu erzeugen
  3. Wenden Sie keine Rotation an, damit Sie sie leicht auf einem nicht einheitlichen Hintergrund ausführen können
  4. Fügt durch CSS kein div-Element hinzu, sodass Sie weiterhin mit dem regulären div-Hintergrund arbeiten können (falls Sie z. B. Code haben!

Das folgende CSS wird das div so gestalten, dass die untere rechte Ecke abgeschnitten ist, sodass Sie einen beliebigen Hintergrund setzen können:

-webkit-clip-path: polygon(100% 0, 100% 65%, 54% 100%, 0 100%, 0 0);
clip-path: polygon(100% 0, 100% 65%, 54% 100%, 0 100%, 0 0);

Es gibt mehrere SVG-Generatoren online:

9
JBE

In naher Zukunft könnten Sie dies mit dem CSS Shapes Module erreichen. 

Mit der shape-inside-Eigenschaft können wir den Textfluss der Form anpassen.

Die von uns gelieferte Form kann inset (), circle (), ellipse () oder polygon () sein.

Dies kann derzeit in Webkit-Browsern durchgeführt werden, aber zuerst müssen Sie Folgendes tun: (Anweisungen von Web Platform )

So aktivieren Sie Shapes, Regions und Mischmodi:

1) Kopieren und einfügen opera: // flags/# enable-experimental-web-platform-features in die Adressleiste und drücken Sie die Eingabetaste.

2) Klicken Sie in diesem Abschnitt auf den Link "Aktivieren".

3) Klicken Sie unten im Browser auf die Schaltfläche "Jetzt neu starten" Fenster.

Wenn Sie das getan haben, dann schauen Sie sich diese GEIGE an.

was so aussieht:

enter image description here

<div class="shape">
     Text here
</div>

CSS

.shape{
  -webkit-shape-inside: polygon(65px 200px,65px 800px,350px 800px,350px 80px,160px 80px);
  shape-inside: polygon(65px 200px,65px 450px,350px 450px,350px 80px,160px 80px);
  text-align: justify;
}

Um die Polygonform zu konstruieren, habe ich diese Seite verwendet

Weitere Informationen zu den verschiedenen Eigenschaften, die unterstützt werden, finden Sie hier

3
Danield

CSS3 linear-gradient() kann diesen Hintergrund zeichnen.

background: linear-gradient(to bottom right, transparent 50px, blue 50px);

body {
  background: linear-gradient(red, orange) no-repeat;
  min-height: 100vh;
  margin: 0;
}
div {
  background: linear-gradient(to bottom right, transparent 50px, blue 50px);
  margin: 25px auto;
  padding: 50px;
  height: 200px;
  width: 200px;
  color: white;
}
<div>
  Lorem ipsum dolor sit amet... Lorem ipsum dolor sit amet... Lorem ipsum dolor sit amet... Lorem ipsum dolor sit amet... Lorem ipsum dolor sit amet... Lorem ipsum dolor sit amet... Lorem ipsum dolor sit amet... 
</div>

3
Mohammad Usman

Ich habe es geschafft, etwas sehr Ähnliches zu tun, indem ich nur zusätzliche Spannweiten verwendet, und der Effekt wird über CSS ausgeführt.

jsFiddle zur Veranschaulichung.

HTML
<div class="more-videos"> <a href=""><span class="text">More videos</span><span class="corner"></span></a> </div>

CSS

`.more-videos {
     padding: 20px;
 }

    .more-videos a {
        text-decoration: none;
        background-color: #7f7f7f;
        position: relative;
        padding: 10px 10px 5px 15px;
    }

        .more-videos a span {
            font-size: 20px;
            color: #ffffff;
        }

            .more-videos a span.text {
                padding-right: 10px;
            }

            .more-videos a span.corner {
                border-top: 15px solid #7f7f7f;
                border-right: 15px solid #4d4c51;
                border-bottom: none;
                border-left: none;
                bottom: 0px;
                right: 0px;
                position: absolute;
            }

        .more-videos a:hover span.corner {
            border-right: 15px solid #999999;
        }

Ich habe einen Hover-Stil eingefügt, der vom übergeordneten Element ausgelöst wurde. Das 'border-right: 15px solid # 4d4c51;' Farbe ist diejenige, die sich von der Hintergrundfarbe des übergeordneten Ankers unterscheiden muss, um den Diagonal-/Winkelkontrast zu erzeugen.

1
David Barnett

Ich fand eine responsive freundliche Lösung von Ray Toal Fiddle: http://jsfiddle.net/duk3/hCaXv/

Die HTML: 

<div class="outer">
<div class="cornered">It's possible to put text up here, too
    but if you want it to follow the slant you have to stack
    several of these.</div>
<div class="main">Hello llo hello llo hello hello hello llo hello hello hello hello hello hello hello hello</div>
</div>

Die css: 

.outer {
    background-color: #ccffff;
    padding: 10px;
    font-size: x-small;
}
.cornered {
    width: 100%;
    box-sizing:border-box;
    height: 0px;
    border-bottom: 2em solid red;
    border-left: 2em solid transparent;
    border-right: 2em solid transparent;
}
.main {
    background-color: red;
    padding: 0 2em;
}

Ich hoffe es hilft !

1
Romainpetit