géométrie - Comment fonctionnent les triangles CSS

Mots clés : cssgeometrypolygoncss-shapescss

meilleur 4 Réponses géométrie - Comment fonctionnent les triangles CSS

vote vote

92

div {    width: 60px;    border-width: 30px;    border-color: red blue green yellow;    border-style: solid;  }
<div></div>
vote vote

85

.triangle {     border-color: yellow blue red green;     border-style: solid;     border-width: 200px 200px 200px 200px;     height: 0px;     width: 0px; }
<div class="triangle"></div>
.triangle {     border-color: yellow blue red green;     border-style: solid;     border-width: 0px 200px 200px 200px;     height: 0px;     width: 0px; }
<div class="triangle"></div>
.triangle {     border-color: transparent transparent red transparent;     border-style: solid;     border-width: 0px 200px 200px 200px;     height: 0px;     width: 0px; }
<div class="triangle"></div>
vote vote

74

.tr {     width: 30%;     padding-bottom: 21.27%; /* = width / 1.41 */     position: relative; }  .tr: before {     content: '';     position: absolute;     top: 0;     left: 0;     width: 100%;     height: 100%;     background: #0079C6; } 
.tr {     width: 30%;     padding-bottom: 21.27%; /* = width / 1.41 */     position: relative; }  .tr:before {     content: '';     position: absolute;     top: 0;     left: 0;     width: 100%;     height: 100%;     background: #0079C6;     transform-origin: 0 100%;             transform: rotate(45deg); } 
.tr {     width: 30%;     padding-bottom: 21.27%; /* = width / 1.41 */     position: relative;     overflow: hidden; }  .tr:before {     content: '';     position: absolute;     top: 0;     left: 0;     width: 100%;     height: 100%;     background-color: #0079C6;     transform-origin: 0 100%;     transform: rotate(45deg); } 
vote vote

64

transforms = [           {'border-left-width'   :'30', 'margin-left': '70'},           {'border-bottom-width' :'80'},           {'border-right-width'  :'30'},           {'border-top-width'    :'0', 'margin-top': '70'},           {'width'               :'0'},           {'height'              :'0', 'margin-top': '120'},           {'borderLeftColor'     :'transparent'},           {'borderRightColor'    :'transparent'}  ];      $('#a').click(function() {$('.border').trigger("click");});  (function($) {      var duration = 1000      $('.border').click(function() {  		  for ( var i=0; i < transforms.length; i++ ) {          $(this)           .animate(transforms[i], duration)  		  }      }).end()  }(jQuery))
.border {      margin: 20px 50px;      width: 50px;      height: 50px;      border-width: 50px;      border-style: solid;      border-top-color: green;      border-right-color: yellow;      border-bottom-color: red;      border-left-color: blue;      cursor: pointer  }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>  <script src="https://code.jquery.com/color/jquery.color-2.1.2.min.js"></script>  Click it!<br>  <div class="border"></div>
/**   * Randomize array element order in-place.   * Using Durstenfeld shuffle algorithm.   */  function shuffleArray(array) {      for (var i = array.length - 1; i > 0; i--) {          var j = Math.floor(Math.random() * (i + 1));          var temp = array[i];          array[i] = array[j];          array[j] = temp;      }      return array;  }    transforms = [           {'border-left-width'   :'30', 'margin-left': '70'},           {'border-bottom-width' :'80'},           {'border-right-width'  :'30'},           {'border-top-width'    :'0', 'margin-top': '70'},           {'width'               :'0'},           {'height'              :'0'},           {'borderLeftColor'     :'transparent'},           {'borderRightColor'    :'transparent'}  ];  transforms = shuffleArray(transforms)        $('#a').click(function() {$('.border').trigger("click");});  (function($) {      var duration = 1000      $('.border').click(function() {  		  for ( var i=0; i < transforms.length; i++ ) {          $(this)           .animate(transforms[i], duration)  		  }      }).end()  }(jQuery))
.border {      margin: 50px;      width: 50px;      height: 50px;      border-width: 50px;      border-style: solid;      border-top-color: green;      border-right-color: yellow;      border-bottom-color: red;      border-left-color: blue;      cursor: pointer  }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>  <script src="https://code.jquery.com/color/jquery.color-2.1.2.min.js"></script>  Click it!<br>  <div class="border"></div>
$('#a').click(function() {$('.border').trigger("click");});  (function($) {      var duration = 1000      $('.border').click(function() {          $(this)           .animate({'border-top-width': 0            ,           					 'border-left-width': 30          ,           					 'border-right-width': 30         ,           					 'border-bottom-width': 80        ,           					 'width': 0                       ,           					 'height': 0                      ,                     'margin-left': 100,                     'margin-top': 150,           					 'borderTopColor': 'transparent',           					 'borderRightColor': 'transparent',           					 'borderLeftColor':  'transparent'}, duration)      }).end()  }(jQuery))
.border {      margin: 50px;      width: 50px;      height: 50px;      border-width: 50px;      border-style: solid;      border-top-color: green;      border-right-color: yellow;      border-bottom-color: red;      border-left-color: blue;      cursor: pointer  }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>  <script src="https://code.jquery.com/color/jquery.color-2.1.2.min.js"></script>  Click it!<br>  <div class="border"></div>

Questions similaires