web-dev-qa-db-ger.com

Schneiden Sie Ecken mit CSS

Ich versuche, die obere linke Ecke eines Div zu "schneiden", als ob Sie die Ecke einer Seite nach unten gefaltet hätten.

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

49
Rixius

Wenn das übergeordnete Element einen einfarbigen Hintergrund hat, können Sie den Effekt mit Pseudoelementen erstellen:

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;
}

http://jsfiddle.net/2bZAW/


P.S.Der kommende border-corner-shape ist genau das, was Sie suchen. Schade, dass es aus der Spezifikation herausgeschnitten wird und es niemals zu Browsern in der Wildnis wird :(

88
Joseph Silber

Wenn Sie ein transparente ausgeschnittene Kante benötigen, können Sie ein gedrehtes Pseudoelement als Hintergrund für div verwenden und es positionieren, um die gewünschte Ecke auszuschneiden:

Transprent cut out Edge on a div

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 müssen die erforderlichen Herstellerpräfixe hinzufügen. Weitere Informationen finden Sie unter canIuse .

Um den rechten unteren Rand ausschneiden, können Sie die Eigenschaften top, transform und transform-Origin des Pseudoelements ä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>

41
web-tiki

CSS-Clip-Pfad

Die Verwendung eines clip-path ist eine neue, aufstrebende Alternative. Es wird immer mehr unterstützt und wird nun gut dokumentiert. Da SVG zum Erstellen der Form verwendet wird, reagiert es sofort nach dem Auspacken.

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 Antwort von web-tiki transform.

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>

24
Stewartside

Sie könnten linear-gradient verwenden. Nehmen wir an, die div-Mutter hatte ein Hintergrundbild, und Sie brauchten eine div, um darauf mit einem grauen Hintergrund und einer linken Ecke mit einem Hundeohr zu sitzen. Sie könnten so etwas tun:

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

Siehe auf CodePen

Lesen Sie weiter:

13
Nate

Hier ist ein anderer Ansatz, der CSS transform: skew(45deg) verwendet, um den Cut-Corner-Effekt zu erzeugen. Die Form selbst beinhaltet drei Elemente (1 reelles und 2 Pseudoelemente) wie folgt:

  • Das div-Element des Hauptcontainers hat overflow: hidden und erzeugt den linken Rand.
  • Das :before-Pseudoelement, das 20% der Höhe des übergeordneten Containers ist und auf das eine Skew-Transformation angewendet wird. Dieses Element erzeugt den oberen Rand und den rechten Rand (abgeschrägter) Rand.
  • Das :after-Pseudoelement, das 80% der Höhe des übergeordneten Elements (im Wesentlichen verbleibende Höhe) entspricht und den unteren Rand, den verbleibenden Teil des rechten Randes, erzeugt.

Die Ausgabe ist reaktionsschnell, erzeugt einen transparenten Schnitt oben 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>

 enter image description here


Im Folgenden finden Sie eine weitere Methode, um den Schnitteckeneffekt mithilfe von linear-gradient-Hintergrundbildern zu erzeugen. Es wird eine Kombination von 3 Gradientenbildern (unten angegeben) verwendet:

  • Ein linearer Farbverlauf (nach links unten abgewinkelt), um den Effekt der geschnittenen Ecke zu erzeugen. Dieser Farbverlauf hat eine feste Größe von 25px x 25px.
  • Ein linearer Verlauf, um links vom Dreieck eine Volltonfarbe zu erzeugen, die den Schnitteffekt verursacht. Ein Farbverlauf wird verwendet, obwohl er eine durchgehende Farbe erzeugt, da Größe, Position des Hintergrunds nur bei Verwendung von Bildern oder Farbverläufen gesteuert werden können. Dieser Gradient befindet sich bei -25px auf der X-Achse (im Wesentlichen bedeutet er, dass er vor der Stelle endet, an der der Schnitt vorhanden ist).
  • Ein weiterer Gradient ähnlich dem obigen, der wieder eine Volltonfarbe erzeugt, aber 25px nach unten auf der Y-Achse positioniert ist (wieder um den Schnittbereich wegzulassen).

Die Ausgabe ist ansprechend, erzeugt einen transparenten Schnitt und erfordert keine zusätzlichen Elemente (Real oder Pseudo). Der Nachteil ist, dass dieser Ansatz nur dann funktioniert, wenn der Hintergrund (Füllung) eine einfarbige Farbe ist und es schwierig ist, Ränder zu erzeugen (jedoch immer noch möglich, wie im Snippet zu sehen ist).

.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>

 enter image description here

13
Harry

Wenn Sie anstelle einer diagonalen Ecke einen diagonalen Rand benötigen, können Sie zwei Divs mit jedem 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>

7
RemBem

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/

 enter image description here

5
Sviat

Bei einer kleinen Änderung an Josephs Code benötigt das Element keinen festen Hintergrund:

div {
    height: 300px;
    background: url('http://images2.layoutsparks.com/1/190037/serene-nature-scenery-blue.jpg');
    position: relative;
}

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

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

Bei Verwendung von 'rgba (0,0,0,0)' kann die innere 'Ecke' unsichtbar sein .

Sie können auch den vierten Parameter 'a' bearbeiten, wobei 0 <a <1 ist, um einen Schatten für den Effekt einer 'gefalteten Ecke' zu erhalten:

http://jsfiddle.net/2bZAW/1922/ (mit Schatten)


HINWEIS: RGBA-Farbwerte werden in IE9 +, Firefox 3+, Chrome, Safari und Opera 10+ unterstützt.

3
hakJav

Wir hatten das Problem unterschiedlicher Hintergrundfarben für unsere geschnittenen Elemente. Und wir wollten nur die obere rechte und die linke untere Ecke.

 enter image description here

body {
 background-color: rgba(0,0,0,0.3)
 
}

.box {
 position: relative;
 display: block;
 background: blue;
 text-align: center;
 color: white;
 padding: 15px;
 margin: 50px;
}

.box:before,
.box:after {
 content: "";
 position: absolute;
 left: 0; 
 right: 0;
 bottom: 100%;
 border-bottom: 15px solid blue;
 border-left: 15px solid transparent;
 border-right: 15px solid transparent;
}

.box:before{
	border-left: 15px solid blue;
}

.box:after{
	border-right: 15px solid blue;
}

.box:after {
 bottom: auto;
 top: 100%;
 border-bottom: none;
 border-top: 15px solid blue;
}


/* Active box */
.box.active{
	background: white;
	color: black;
}



.active:before,
.active:after {
 border-bottom: 15px solid white;
}

.active:before{
	border-left: 15px solid white;
}

.active:after{
	border-right: 15px solid white;
}

.active:after {
 border-bottom: none;
 border-top: 15px solid white;
}
<div class="box">
 Some text goes here. Some text goes here. Some text goes here. Some text goes here.<br/>Some text goes here.<br/>Some text goes here.<br/>Some text goes here.<br/>Some text goes here.<br/>Some text goes here.<br/>
</div>
<div class="box">
 Some text goes here.
</div>
<div class="box active">
 Some text goes here.
 <span class="border-bottom"></span>
</div>
<div class="box">
 Some text goes here.
</div>

2
Simon Franzen

Laut Harrys linearer Gradientenlösung (antwortete am 14. Oktober 15 um 09:55 Uhr), heißt es, dass Opazitätshintergrund nicht möglich ist, ich habe es versucht und ja, das ist es nicht. 

Aber! Ich habe eine Problemumgehung gefunden. Nein, es ist nicht super optimiert, aber es hat funktioniert. Also hier ist meine Lösung. Da Harry kein Pseudo-Element verwendet, können wir dies erreichen, indem Sie ein Element erstellen. 

Legen Sie die Position relativ zum Container fest und erstellen Sie ein Pseudoelement mit den gleichen Eigenschaften des linearen Verlaufs. Mit anderen Worten, einfach klonen. Setzen Sie dann einen transparenten Hintergrund für den Container und sagen wir einen schwarzen Hintergrund für den Klon. Setzen Sie eine absolute Position darauf, einen Z-Index von -1 und einen Opazitätswert (dh 50%). Es wird die Arbeit machen. Es ist wieder ein Workaround und es ist nicht perfekt, aber es funktioniert gut. 

.cut-corner {
    position: relative;
    color: white;
    background-repeat: no-repeat;
    background-image: linear-gradient(white, white), linear-gradient(white, white), linear-gradient(white, white), linear-gradient(white, white), linear-gradient(to bottom left, transparent calc(50% - 1px), white calc(50% - 1px), white calc(50% + 1px), transparent calc(50% + 1px)), linear-gradient(transparent, transparent), linear-gradient(transparent, transparent);
    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;
}
.cut-corner:after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    right: 0;
    top: 0;
    z-index: -1;
    opacity: 0.5;
    background-repeat: no-repeat;
    background-image: linear-gradient(white, white), linear-gradient(white, white), linear-gradient(white, white), linear-gradient(white, white), linear-gradient(to bottom left, transparent calc(50% - 1px), white calc(50% - 1px), white calc(50% + 1px), black calc(50% + 1px)), linear-gradient(black, black), linear-gradient(black, black);
    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 */

div {
  padding: 10px;
}
body{
 background-image: radial-gradient(circle, #3F9CBA 0%, #153346 100%);
}
<div class="cut-corner">
  Some content<br>
  Some content<br>
  Some content<br>
  Some content  
</div>

1
Kiwad

Eine andere Lösung: html:

<div class="background">
  <div class="container">Hello world!</div>
</div>

cSS:

.background {
  position: relative;
  width: 50px;
  height: 50px;
  border-right: 150px solid lightgreen;
  border-bottom: 150px solid lightgreen;
  border-radius: 10px;
}
.background::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
  border: 25px solid lightgreen;
  border-top-color: transparent;
  border-left-color: transparent;
}
.container {
  position: absolute;
  padding-left: 25px;
  padding-top: 25px;
  font-size: 38px;
  font-weight: bolder;
}

https://codepen.io/eggofevil/pen/KYaMjV

0
Alex Gurin

durch kleine Modifikation des Joshep-Codes ... Sie können diesen Code verwenden, der wie eine rechte Ecke erscheint, die entsprechend Ihrer Anforderung heruntergeklappt ist.

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 blue;
    width: 0;
}
0
Gagan Gami

Ich habe kürzlich die obere rechte Ecke abgeschnitten und die Registerkarten wie Ordner überlagert. Kompletter Code noob, also ignoriere den beschissenen Code, aber ich habe dies getan, indem ich ein Quadrat, ein Dreieck und ein Rechteck kombiniert habe ... Dies ist vielleicht ein neuer Ansatz, aber hoffentlich findet es jemand hilfreich.

https://i.stack.imgur.com/qFMRz.png

Hier ist der HTML-Code:

<!DOCTYPE html>
<html lang ="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" type="text/css" href="style.css"> 
    </head>
    <body>
        <div class="folders">
            <div class="container">
                <div class="triangleOne">
                    <p class="folderNames">Home</p>
                </div>
                <div class="triangleOneCut">
                </div>
                <div class="triangleOneFill">
                </div>
            </div>

            <div class="container2">
                <div class="triangleOne blue">
                    <p class="folderNames">About</p>
                </div>
                <div class="triangleOneCut blueCut">
                </div>
                <div class="triangleOneFill blue">
                </div>
            </div>

            <div class="container3">
                <div class="triangleOne green">
                    <p class="folderNames">Contact</p>
                </div>
                <div class="triangleOneCut greenCut">
                </div>
                <div class="triangleOneFill green">
                </div>
            </div>
        </div>
    </body>
</html>

Hier ist das CSS:

.triangleOne {
    height: 50px;
    width: 40px;
    background: red;
    border-radius: 5px 0px 0px 5px;
    position: absolute;
}

.triangleOneCut {
    content: '';
    position: absolute;
    top: 0; left: 40px;
    border-top: 10px solid transparent;
    border-left: 10px solid red;
    width: 0;
}

.triangleOneFill {
    content: '';
    position: absolute;
    top: 10px; left: 40px;
    width: 10px;
    height: 40px;
    background-color: red;
    border-radius: 0px 0px 5px 0px;
}

.container {
    position: relative;
    height: 50px;
    width: 50px;
    display: inline-block;
    z-index: 3;
}

.container2 {
    position: relative;
    height: 50px;
    width: 50px;
    display: inline-block;
    left: -10px;
    z-index: 2;
}

.container3 {
    position: relative;
    height: 50px;
    width: 50px;
    display: inline-block;
    left: -20px;
    z-index: 1;
}

.blue {
    background-color: blue;
}

.green {
    background-color: green;
}

.blueCut {
    border-left: 10px solid blue;
}

.greenCut {
    border-left: 10px solid green;
}

.folders {
    width: 160px;
    height: 50px;
    /* border: 10px solid white; */
    margin: auto;
    padding-left: 25px;
    margin-top: 100px;
}

.folderNames {
    text-align: right;
    padding-left: 2px;
    color: white;
    margin-top: 1.5px;
    font-family: monospace;
    font-size: 6.5px;
    border-bottom: double 1.5px white;
}
0
Xenxen