<div class=boxh>
   <p>Mise en page CSS basée sur les valeurs physiques.</p>
</div>  

<div class=boxv>
    <p>Mise en page CSS basée sur les valeurs physiques.</p>
</div> 
  

body {
  background-color: #1D1E22;
  color: black;
}

.boxh {
  width: 150px;
  writing-mode : horizontal-tb;
  background-color: white;
  padding-top:50px;
  padding-bottom: 10px;
  padding-right:70px;
  padding-left: 10px;
  border-top: #628395 5px solid;
  border-right: #6A994E 5px solid;
  border-bottom: #F4AC45 5px solid;
  border-left: #A5668B 5px solid;
  margin-right: 20px;
  float: left;
}

.boxv {
  height: 150px;
  writing-mode : vertical-rl;
  background-color: white;
  padding-top:50px;
  padding-bottom: 10px;
  padding-right:70px;
  padding-left: 10px;
  border-top: #628395 5px solid;
  border-right: #6A994E 5px solid;
  border-bottom: #F4AC45 5px solid;
  border-left: #A5668B 5px solid;
  margin-right: 20px;
}
  writing-mode : vertical-rl;

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.