Skip welcome & menu and move to editor
Welcome to JS Bin
Load cached copy from
 
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
  <div class='container'>
    <div class='text'>Hello<br />World<br /> I'm Steffi</div>
    <div class='triangleA'></div>
    <div class='triangleB'>
      <div class='text'>
        Can you <br />
        Help Me Please</div>
    </div>
    <div class='triangleC'>
      <div class='text'>
        Stackover-<br />flow.com
      </div>
    </div>
  </div>
</body>
</html>
 
.container {
  position: absolute;
  overflow: hidden;
  width: 550px;
  height: 500px;
  background: #9f9f9f;
}
div.text {
  font: bold 45px 'Helvetica';
  text-align: left;
  margin: 120px 0 0 180px;
  line-height: 40px;
  color: #3f3f3f;
  text-transform: uppercase;
  text-shadow: 0px 1px rgba(255,255,255,.4);
}
div.triangleA, div.triangleB, div.triangleC {
  position: absolute;
}
div.triangleA {
  background: #afafaf;
  width: 500px;
  height: 600px;
  -webkit-transform: rotate(45deg);
  top: -350px;
  left: -230px; 
}
div.triangleB {
  background: rgba(255,255,255,.4);
  overflow: hidden;
  width: 500px;
  height: 600px;
  -webkit-transform: rotate(-70deg);
  top: 200px;
  left: -230px; 
}
div.triangleB div.text {
  -webkit-transform: rotate(70deg);
  margin-left: 240px;
  margin-top: 550px;
  width: 500px;
}
div.triangleC {
  background: #8f8f8f;
  -webkit-transform: rotate(-25deg);
  top: 370px;
  left: 100px;
  height: 300px;
  width: 600px;
  overflow: hidden;
}
div.triangleC div.text { 
    -webkit-transform: rotate(25deg); 
    margin: 0;
    margin-left: 190px;
    margin-top: 60px;
}
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers