web-dev-qa-db-fra.com

Créer une ligne/section/bordure en diagonale avec CSS

J'essaie de créer une ligne diagonale sur une page Web, pour agir comme un saut de section/section. Ceci est essentiellement une section de couleur scindée. Je ne peux pas utiliser une image, car si la page est agrandie, l'image va pixéliser. J'ai donc besoin de pouvoir tracer une ligne diagonale directement au bas de la div, comme dans l'image ci-dessous. 

J'ai essayé d'utiliser une bordure, mais je ne peux pas obtenir la pause réelle au milieu, plutôt que du côté droit ou gauche. 

Est-il possible de tracer des lignes diagonales en CSS? Comme vous pouvez le constater, je dois créer une div haute de 90px et avoir la ligne fractionnée/diagonale dans cette div. Je peux ensuite examiner l’ajout de l’image, mais le problème principal n’est pas de savoir si cela est possible avec CSS. 

Diagonal section separator

csscss3svgresponsive-designcss-shapes
13
Dom Greenslade BSc

Avec un svg, c'est assez simple:

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>

Notez que j'ai utilisé l'attribut preserveAspectRatio="none" pour que la forme ait une largeur de 100% et conserve une hauteur de 90px

Et ici avec une image de singe:

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

Vous pouvez le faire sans aucune coupure et en utilisant simplement les bordures d'une manière unique. Cela devrait également être compatible avec tous les navigateurs, mais je ne l'ai pas encore testé.

Initialement divisé cela en 2 divs/triangles séparés et les a rejoints, mais grâce à web-tiki et kaiido, perfectionné pour utiliser seulement 1 div et CSS minimal

*{
  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>

Réponse originale en utilisant plusieurs 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

Utilisez un dégradé linéaire

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

5
Paulie_D

Vous pouvez utiliser CSS3 clip:

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

Démo: http://jsfiddle.net/zLkrfeev/2/

Les navigateurs ne le supportent pas largement: http://caniuse.com/#feat=css-clip-path

3
Ivanka Todorova

si vous voulez mettre une bordure en diagonale dans une colonne, vous pouvez le faire de cette façon et sa réactivité à 100%. votre exigence pourrait être différente si. Je mets l'image transparente qui contient une bordure blanche en diagonale dans la colonne de droite de cette section.

<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