Schneiden Sie Ecken mit CSS ab

Ich möchte die linke obere Ecke eines Div “abschneiden”, als ob Sie die Ecke einer Seite nach unten gefaltet hätten.

Ich würde es gerne in reinem CSS machen, gibt es irgendwelche Methoden?

Wenn das übergeordnete Element einen einfarbigen Hintergrund hat, können Sie Pseudoelemente verwenden, um den Effekt zu erzeugen:

div {
    height: 300px;
    background: red;
    position: relative;
}

div:before {
    content: '';
    position: absolute;
    top: 0; right: 0;
    border-top: 80px solid white;
    border-left: 80px solid red;
    width: 0;
}

<div></div>

http://jsfiddle.net/2bZAW/

PS Das bevorstehende border-corner-shape ist genau das, was Sie suchen. Schade, dass es möglicherweise aus der Spezifikation herausgeschnitten wird und es niemals in irgendeinen Browser in freier Wildbahn schafft 🙁

Wenn Sie eine brauchen transparenter Ausschnittrandkönnen Sie ein gedrehtes Pseudoelement als Hintergrund für die verwenden div und positionieren Sie es, um die gewünschte Ecke auszuschneiden:

body {
  background: url(http://i.imgur.com/k8BtMvj.jpg);
  background-size: cover;
}
div {
  position: relative;
  width: 50%;
  margin: 0 auto;
  overflow: hidden;
  padding: 20px;
  text-align: center;
}
div:after {
  content: '';
  position: absolute;
  width: 1100%; height: 1100%;
  top: 20px; right: -500%;
  background: rgba(255,255,255,.8);
  transform-origin: 54% 0;
  transform: rotate(45deg);
  z-index: -1;
}

<div>
  ... content ...<br/>... content ...<br/>... content ...<br/>... content ...<br/>... content ...<br/>... content ...<br/>... content ...<br/>... content ...<br/>... content ...<br/>... content ...<br/>
</div>

Beachten Sie, dass diese Lösung Transformationen verwendet und Sie die erforderlichen Anbieterpräfixe hinzufügen müssen. Weitere Informationen finden Sie unter kann ich benutzen.

Zu schneiden Sie die untere rechte Kantekönnen Sie die top-, transform- und transform-origin-Eigenschaften des Pseudo-Elements wie folgt ändern:

body {
  background: url(http://i.imgur.com/k8BtMvj.jpg);
  background-size: cover;
}
div {
  position: relative;
  width: 50%;
  margin: 0 auto;
  overflow: hidden;
  padding: 20px;
  text-align: center;
}
div:after {
  content: '';
  position: absolute;
  width: 1100%; height: 1100%;
  bottom: 20px; right: -500%;
  background: rgba(255,255,255,.8);
  transform-origin: 54% 100%;
  transform: rotate(-45deg);
  z-index: -1;
}

<div>
  ... content ...<br/>... content ...<br/>... content ...<br/>... content ...<br/>... content ...<br/>... content ...<br/>... content ...<br/>... content ...<br/>... content ...<br/>... content ...<br/>
</div>

CSS-Clip-Pfad

Verwendung einer Clip-Pfad ist eine neue, aufstrebende Alternative. Es beginnt, mehr und mehr unterstützt zu werden und wird nun gut dokumentiert. Da es SVG verwendet, um die Form zu erstellen, reagiert es sofort nach dem Auspacken.

• Kann ich benutzen
• Clip-Pfad-Generator

div {
  width: 200px;
  min-height: 200px;
  -webkit-clip-path: polygon(0 0, 0 100%, 100% 100%, 100% 25%, 75% 0);
  clip-path: polygon(0 0, 0 100%, 100% 100%, 100% 25%, 75% 0);
  background: lightblue;
}

<div>
  <p>Some Text</p>
</div>

CSS-Transformation

Ich habe eine Alternative zur Transformationsantwort von Web-Tiki.

body {
  background: lightgreen;
}
div {
  width: 200px;
  height: 200px;
  background: transparent;
  position: relative;
  overflow: hidden;
}
div.bg {
  width: 200%;
  height: 200%;
  background: lightblue;
  position: absolute;
  top: 0;
  left: -75%;
  transform-origin: 50% 50%;
  transform: rotate(45deg);
  z-index: -1;
}

<div>
  <div class="bg"></div>
  <p>Some Text</p>
</div>

Hier ist ein weiterer Ansatz mit CSS transform: skew(45deg) um den Cut-Corner-Effekt zu erzeugen. Die Form selbst umfasst drei Elemente (1 echtes und 2 Pseudo-Elemente) wie folgt:

• Der Hauptbehälter div Element hat overflow: hidden und erzeugt den linken Rand.
• Die :before Pseudo-Element, das 20 % der Höhe des übergeordneten Containers hat und auf das eine Skew-Transformation angewendet wurde. Dieses Element erzeugt den oberen Rand und den geschnittenen (schrägen) Rand auf der rechten Seite.
• Die :after Pseudo-Element, das 80 % der Höhe des übergeordneten Elements (im Grunde die verbleibende Höhe) beträgt und den unteren Rand erzeugt, den verbleibenden Teil des rechten Rands.

Die erzeugte Ausgabe reagiert, erzeugt oben einen transparenten Schnitt und unterstützt transparente Hintergründe.

div {
  position: relative;
  height: 100px;
  width: 200px;
  border-left: 2px solid beige;
  overflow: hidden;
}
div:after,
div:before {
  position: absolute;
  content: '';
  width: calc(100% - 2px);
  left: 0px;
  z-index: -1;
}
div:before {
  height: 20%;
  top: 0px;
  border: 2px solid beige;
  border-width: 2px 3px 0px 0px;
  transform: skew(45deg);
  transform-origin: right bottom;
}
div:after {
  height: calc(80% - 4px);
  bottom: 0px;
  border: 2px solid beige;
  border-width: 0px 2px 2px 0px;
}
.filled:before, .filled:after {
  background-color: beige;
}

/* Just for demo */

div {
  float: left;
  color: beige;
  padding: 10px;
  transition: all 1s;
  margin: 10px;
}
div:hover {
  height: 200px;
  width: 300px;
}
div.filled{
  color: black;
}
body{
 background-image: radial-gradient(circle, #3F9CBA 0%, #153346 100%);
}

<div class="cut-corner">Some content</div>
<div class="cut-corner filled">Some content</div>

Das Folgende ist eine weitere Methode, um den Cut-Corner-Effekt zu erzeugen linear-gradient Hintergrundbilder. Es wird eine Kombination aus 3 Verlaufsbildern (siehe unten) verwendet:

• Ein linearer Farbverlauf (nach unten links abgewinkelt), um den Cut-Eck-Effekt zu erzeugen. Dieser Farbverlauf hat eine feste Größe von 25 x 25 Pixel.
• Ein linearer Verlauf, um links neben dem Dreieck, das den Schnitteffekt verursacht, eine durchgehende Farbe bereitzustellen. Ein Farbverlauf wird verwendet, obwohl er eine Volltonfarbe erzeugt, da wir Größe und Position des Hintergrunds nur steuern können, wenn Bilder oder Farbverläufe verwendet werden. Dieser Farbverlauf ist bei -25px auf der X-Achse positioniert (was im Grunde bedeutet, dass er vor der Stelle enden würde, an der der Schnitt vorhanden ist).
• Ein weiterer Farbverlauf ähnlich dem obigen, der wiederum eine Volltonfarbe erzeugt, aber 25 Pixel nach unten auf der Y-Achse positioniert ist (um den Schnittbereich wieder auszulassen).

Die erzeugte Ausgabe reagiert, erzeugt einen transparenten Schnitt und erfordert keine zusätzlichen Elemente (real oder pseudo). Der Nachteil ist, dass dieser Ansatz nur funktionieren würde, wenn der Hintergrund (Füllung) einfarbig ist und es sehr schwierig ist, Ränder zu erzeugen (aber immer noch möglich, wie im Snippet zu sehen).

.cut-corner {
  height: 100px;
  width: 200px;
  background-image: linear-gradient(to bottom left, transparent 50%, beige 50%), linear-gradient(beige, beige), linear-gradient(beige, beige);
  background-size: 25px 25px, 100% 100%, 100% 100%;
  background-position: 100% 0%, -25px 0%, 100% 25px;
  background-repeat: no-repeat;
}
.filled {
  background-image: linear-gradient(black, black), linear-gradient(black, black), linear-gradient(black, black), linear-gradient(black, black), linear-gradient(to bottom left, transparent calc(50% - 1px), black calc(50% - 1px), black calc(50% + 1px), beige calc(50% + 1px)), linear-gradient(beige, beige), linear-gradient(beige, beige);
  background-size: 2px 100%, 2px 100%, 100% 2px, 100% 2px, 25px 25px, 100% 100%, 100% 100%;
  background-position: 0% 0%, 100% 25px, -25px 0%, 0px 100%, 100% 0%, -25px 0%, 100% 25px;
}

/* Just for demo */

*{
  box-sizing: border-box;
  }
div {
  float: left;
  color: black;
  padding: 10px;
  transition: all 1s;
  margin: 10px;
}
div:hover {
  height: 200px;
  width: 300px;
}
body{
 background-image: radial-gradient(circle, #3F9CBA 0%, #153346 100%);
}

<div class="cut-corner">Some content</div>
<div class="cut-corner filled">Some content</div>

Du könntest benutzen linear-gradient. Sagen wir die Eltern div hatte ein Hintergrundbild, und Sie brauchten ein div darauf zu sitzen mit einem grauen Hintergrund und einer Eselsohr-linken Ecke. Du könntest so etwas machen:

.parent-div { background: url('/image.jpg'); }
.child-div { 
   background: #333;
   background: linear-gradient(135deg, transparent 30px, #333 0);
}

Sehen Sie es auf CodePen

Weiterlesen:

• CSS Gradients auf CSS-Tricks
• Abgeschrägte Ecken und negativer Randradius mit CSS3-Verläufen

Wenn Sie anstelle einer diagonalen Ecke einen diagonalen Rand benötigen, können Sie 2 Divs mit jeweils einem Pseudoelement stapeln:

DEMO

http://codepen.io/remcokalf/pen/BNxLMJ

.container {
  padding: 100px 200px;
  overflow: hidden;
}

div.diagonal {
  background: #da1d00;
  color: #fff;
  font-family: Arial, Helvetica, sans-serif;
  width: 300px;
  height: 300px;
  padding: 70px;
  position: relative;
  margin: 30px;
  float: left;
}

div.diagonal2 {
  background: #da1d00;
  color: #fff;
  font-family: Arial, Helvetica, sans-serif;
  width: 300px;
  height: 300px;
  padding: 70px;
  position: relative;
  margin: 30px;
  background: #da1d00 url(http://www.remcokalf.nl/background.jpg) left top;
  background-size: cover;
  float: left;
}

div.diagonal3 {
  background: #da1d00;
  color: #da1d00;
  font-family: Arial, Helvetica, sans-serif;
  width: 432px;
  height: 432px;
  padding: 4px;
  position: relative;
  margin: 30px;
  float: left;
}

div.inside {
  background: #fff;
  color: #da1d00;
  font-family: Arial, Helvetica, sans-serif;
  width: 292px;
  height: 292px;
  padding: 70px;
  position: relative;
}

div.diagonal:before,
div.diagonal2:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  border-top: 80px solid #fff;
  border-right: 80px solid transparent;
  width: 0;
}

div.diagonal3:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  border-top: 80px solid #da1d00;
  border-right: 80px solid transparent;
  width: 0;
  z-index: 1;
}

div.inside:before {
  content: '';
  position: absolute;
  top: -4px;
  left: -4px;
  border-top: 74px solid #fff;
  border-right: 74px solid transparent;
  width: 0;
  z-index: 2;
}

h2 {
  font-size: 30px;
  line-height: 1.3em;
  margin-bottom: 1em;
  position: relative;
  z-index: 1000;
}

p {
  font-size: 16px;
  line-height: 1.6em;
  margin-bottom: 1.8em;
}

#grey {
  width: 100%;
  height: 400px;
  background: #ccc;
  position: relative;
  margin-top: 100px;
}

#grey:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  border-top: 80px solid #fff;
  border-right: 80px solid #ccc;
  width: 400px;
}

<div id="grey"></div>
<div class="container">
  <div class="diagonal">
    <h2>Header title</h2>
    <p>Yes a CSS diagonal corner is possible</p>
  </div>
  <div class="diagonal2">
    <h2>Header title</h2>
    <p>Yes a CSS diagonal corner with background image is possible</p>
  </div>
  <div class="diagonal3">
    <div class="inside">
      <h2>Header title</h2>
      <p>Yes a CSS diagonal border is even possible with an extra div</p>
    </div>
  </div>
</div>

Mit diesem Code können Sie Ecken auf jeder Seite des Rechtecks ​​schneiden:

div {
  display:block;
  height: 300px;
  width: 200px;
  background: url('http://lorempixel.com/180/290/') no-repeat;
  background-size:cover;

  -webkit-clip-path: polygon(10px 0%, calc(100% - 10px) 0%, 100% 10px, 100% calc(100% - 10px), calc(100% - 10px) 100%, 10px 100%, 0% calc(100% - 10px), 0% 10px);
  clip-path: polygon(10px 0%, calc(100% - 10px) 0%, 100% 10px, 100% calc(100% - 10px), calc(100% - 10px) 100%, 10px 100%, 0% calc(100% - 10px), 0% 10px);
}

http://jsfiddle.net/2bZAW/5552/