wake-up-neo.com

Erstellen einer diagonalen Linie/eines Abschnitts/eines Rahmens mit CSS

Ich versuche, eine diagonale Linie auf einer Webseite zu erstellen, um als Abschnitts-/Abschnittswechsel zu fungieren. Dies ist im Wesentlichen ein Abschnitt mit aufgeteilten Farben. Ich kann kein Bild verwenden, als würde die Seite vergrößert, das Bild wird pixeliert. Ich muss also in der Lage sein, eine diagonale Linie direkt am unteren Rand des div zu zeichnen, wie das Bild unten. 

Ich habe versucht, eine Grenze zu verwenden, jedoch kann ich nicht die tatsächliche Pause in der Mitte sehen, anstatt auf der rechten oder linken Seite. 

Gibt es eine Möglichkeit, diagonale Linien in CSS zu zeichnen? Wie Sie sehen können, muss ich ein Div erstellen, das 90px hoch ist, und die Split/Diagonale-Linie in diesem Div haben. Ich kann mir dann das Hinzufügen des Bildes ansehen, aber das Hauptproblem ist nicht zu wissen, ob dies mit CSS möglich ist. 

Diagonal section separator

13

Mit einem SVG ist es ziemlich einfach:

svg {
  display: block;
  width: 100%;
  height: 90px;
  background: yellow;
}
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 10" preserveAspectRatio="none">
  <polygon points="100 0 100 10 0 10" />
</svg>

Beachten Sie, dass ich das preserveAspectRatio="none"-Attribut verwendet habe, damit die Form eine Breite von 100% und eine Höhe von 90px haben kann

Und hier mit einem Affenbild:

div {
  position: relative;
}
svg {
  display: block;
  width: 100%;
  height: 90px;
  background: yellow;
}
img {
  height: 50px;
  position: absolute;
  top: 0; bottom: 0;
  left: 0; right: 0;
  margin: auto;
  background: #fff;
  border-radius: 50%;
  padding: 10px;
}
<div>
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 10" preserveAspectRatio="none">
    <polygon points="100 0 100 10 0 10" />
  </svg>
  <img src="http://images.clipartpanda.com/monkey-clipart-black-and-white-16981-monkey-face-svg.svg" alt="" />
</div>

20
web-tiki

Sie können dies tun, ohne Beschneidungen vorzunehmen und Ränder auf einzigartige Weise zu verwenden. Dies sollte auch Cross-Browser-kompatibel sein, aber ich habe es noch nicht für alles getestet

Anfangs teilte man dies in 2 getrennte divs/triangle auf und verband sie, aber dank web-tiki und kaiido perfektionierte man es, nur 1 div und minimales CSS zu verwenden

*{
  border: 0;
  padding: 0;
  margin: 0;
}

#gradient {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 90px 100vw 0 0;
  border-color: yellow black transparent transparent;
  transform: scale(1.0001);
}
<div id="gradient"></div>

Ursprüngliche Antwort mit mehreren Divs:

*{
  border: 0;
  padding: 0;
  margin: 0;
}

#container {
  width: 100%;
  position: relative;
}

#container div {
  position: absolute;
}

#top-triangle {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 90px 100vw 0 0;
  border-color: yellow transparent transparent transparent;
}

#bottom-triangle {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 0 90px 100vw;
  border-color: transparent transparent black transparent;
}
<div id="container">
  <div id="top-triangle"></div>
  <div id="bottom-triangle"></div>
</div>

8
Adjit

Verwenden Sie einen linearen Farbverlauf

div {
  height: 90px;
  background-image: linear-gradient(to bottom right, yellow, yellow 50%, black 50%, black);
}
<div></div>

5
Paulie_D

Sie können CSS3 clip verwenden:

.yellow {
  width: 100%;
  height: 90px;
  background: yellow;
  -webkit-clip-path: polygon(100% 0, 0 0, 0 100%);
  clip-path: polygon(100% 0, 0 0, 0 100%);
}
.black {
  width: 100%;
  height: 90px;
  background: black;
  -webkit-clip-path: polygon(100% 0, 0 100%, 100% 99%);
  clip-path: polygon(100% 0, 0 100%, 100% 99%);
  margin-top: -90px;
}
<div class="yellow"></div>
<div class="black"></div>

Demo: http://jsfiddle.net/zLkrfeev/2/

Es wird von den Browsern nicht allgemein unterstützt: http://caniuse.com/#feat=css-clip-path

3
Ivanka Todorova

wenn Sie eine diagonale Umrandung in eine Spalte einfügen möchten, können Sie dies auf diese Weise tun, und zwar zu 100%. Ihre Anforderung könnte jedoch anders sein. Ich habe es mit einem transparenten Bild versehen, das einen weißen diagonalen Rand in der rechten Spalte dieses Abschnitts enthält.

<div id="wrapper">
  <div class="h-row">
    <div class="h-left">
    </div>
    <div class="h-right">
      <div class="hr-box"></div>
    </div>
  </div>
</div>

<style>
.h-row{display: table; table-layout: fixed; height: 100%; width: 100%;}
.h-left,
.h-right{display: table-cell; vertical-align: top; height:250px;}/*height is just for demo purpose you can remove it ofcourse and fill the content */ 
.h-left{background: #e9eae2; padding: 50px 83px 15px 165px; width: 69%;}
.h-right{background: #7acec3 url('https://previews.dropbox.com/p/thumb/AAMv9WREPIx2AXUVhzCrK5Hl1jxf3ofX0teck9P94bG_SCjB28QPmKqXuchYyjp_xFMjMrGLzRYHh0O9wBOZJMZW9L_97lScKB22dgco9eGMJ1PCBbFepUcDkPg3aUE_1ONik2rKQ2SgRvtUgdq8nA_Ev1gxLxq8yWcXNKOdxKGBNOqe4FTHnbAgGy-JD4UtwZliw8c0fmNah8rydlD4JetFxNubkUyW4I_Q-XRL5qjW9A/p.png?size=1280x960&size_mode=3') no-repeat center center/ 100% 100%; padding: 50px 165px 15px 0; width: 31%; position: relative;}
.h-left .row{margin:0 -44px;}
</style>

https://codepen.io/neel555nc/pen/LgjoOg

0
confusedGuy