Comment puis-je dessiner une Diagonale div?

Comment puis-je dessiner une diagonale div en CSS? Google ne révèle comment tracer la diagonale des "lignes", mais je ne pouvais pas comprendre comment le faire pour div's.

Dans l'image ci-dessous, la partie bleue est la div:

Vous pouvez utiliser css transform faire pivoter et mettre à l'intérieur d'une autre case pour avoir des lignes droites horizontales.
ce qui devait arriver est du texte augmente?
stackoverflow.com/questions/9462535/...
c'est une bonne question. Je crois que je préfère la division d'accroître, comme d'habitude, sans modification de la diagonale de la forme, si vous savez ce que je veux dire, mais en tentant de le faire sans javascript de façon à ce que pourrait être un peu difficile.
Merci @Stephan, que le code est sur place.
Pour donner un élément d'une coutume non-rectangulaire, vous utilisez la forme de l'intérieur et de la forme-à l'extérieur de propriétés. J'ai trouvé le tutoriel suivant sur la création de non rectangulaires, mises en page avec css très utile: sarasoueidan.com/blog/css-shapes
Merci @The_Fritz je suis en train de regarder cela maintenant.

InformationsquelleAutor uSeRnAmEhAhAhAhAhA | 2014-03-12

13

Vous pouvez utiliser CSS3 transformer skewY() fonction avec valeur positive pour l' parent et valeur négative pour le enfant wrapper élément pour obtenir l'effet.
```
.parent {
  -webkit-transform: skewY(-5deg);
  -moz-transform: skewY(-5deg);
  -ms-transform: skewY(-5deg);
  -o-transform: skewY(-5deg);
  transform: skewY(-5deg);
}

.parent > .child {
  -webkit-transform: skewY(5deg);
  -moz-transform: skewY(5deg);
  -ms-transform: skewY(5deg);
  -o-transform: skewY(5deg);
  transform: skewY(5deg);
}
```
TRAVAIL DE DÉMONSTRATION.

De la spec:

skewY() spécifie un 2D inclinaison de transformation le long de l'axe Y par la
angle donné.

Il est intéressant de noter que l'utilisation de skewY() ne va pas changer la largeur de la transformation des éléments.

Aussi esprit la enfant sélecteur. Il est préférable d'utiliser directement sélecteur d'enfant .parent > .child plutôt que sélecteur de descendant pour annuler la transformation à la enfant élément.
- Je vous remercie beaucoup. J'utilise l'inclinaison de l'outil de tous les jours dans les éditeurs d'image, pourquoi diable n'ai-je pas pensé à rechercher pour l'inclinaison?! Beaucoup apprécié!
- Je suis en attente de la minuterie à court si je peux accepter la réponse. Je serai de retour.
- Rappelez-vous juste que transform ne fonctionne pas dans opera navigateurs.
InformationsquelleAutor Hashem Qolami
3

Utilisation :
```
transform: rotate(45deg);
```
Juste ajouter des préfixes pour tous les navigateurs (-webKit, -moz, ... )
- Qui permettrait de faire pivoter le contenu dans le div en trop...
InformationsquelleAutor nikitz

Vraiment cool codes à l'aide d'background-image:
https://codepen.io/PositionRelativ/pen/Ichrg

 .one{
   background-color: #013A6B;
   background-image: -webkit-linear-gradient(30deg, #013A6B 50%, #004E95 50%);
   min-height: 500px;
 }

InformationsquelleAutor Albuquerque Web Design

J'ai utilisé clip-chemin d'accès pour obtenir le même résultat. voici mon code

CSS:

body
{
	margin: 0;
	padding: 0;
}
.polygon
{
	height: 100vh;
	background: #00A2E8;
	clip-path: polygon(0 50%, 100% 0,100% 50%,0 100%);
	position: relative;
}
.content
{
	position: absolute;
	top: 50%;
	left: 20%;
}

HTML:

<html>
	<head>
		<title>Clippath</title>
		<link rel="stylesheet" type="text/css" href="clip.css">
	</head>
	<body>
		<div class="polygon">
			<div class="content">
			<h2 class="head">heading</h2>
			<p>lorem ipsum dolar sit amet lol</p>
			</div>
		
		</div>
	</body>
</html>

InformationsquelleAutor Pushkal Singh

Vous devez vous connecter pour publier un commentaire.