Skip to content

Instantly share code, notes, and snippets.

@thiago-vieira

thiago-vieira/diagonal_div.html

Created March 27, 2021 01:06
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save thiago-vieira/2a8253b65d9fd26741c4edd7faa2ab15 to your computer and use it in GitHub Desktop.
Save thiago-vieira/2a8253b65d9fd26741c4edd7faa2ab15 to your computer and use it in GitHub Desktop.
Download ZIP
HTML e CSS - criando div na diagonal
Raw
diagonal_div.html
<html>
<head>
<style>
div.container {
background:black;
width:500px;
height: 100px;
padding-top: 90px;
padding-bottom: 4px;
}
.container div {
display: inline-block;
margin-left:-150px;
position: relative;
}
.container div.first {
margin:0;
}
div.item {
width: 200px;
height: auto;
background-color: yellow;
/* Rotate div */
-ms-transform: rotate(-60deg); /* IE 9 */
-webkit-transform: rotate(-60deg); /* Chrome, Safari, Opera */
transform: rotate(-60deg);
}
</style>
</head>
<body>
<div class='container'>
<div class='item first'>Hello</div>
<div class='item'>Other!</div>
<div class='item'>Another</div>
<div class='item'>and other</div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment