Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
  <ul>
    <li>
      <div class="holder">
        <div class="heading">Собственник</div>
        <div class="subheading">компании</div>
      </div>
    </li>
    <li>
      <div class="holder">
        <div class="heading">Внутренний</div>
        <div class="subheading">пользователь</div>
      </div>
    </li>
  </ul>
</body>
</html>
 
* {
    box-sizing: border-box;
    -moz-box-sizing: border-box; /*Firefox 1-3*/
    -webkit-box-sizing: border-box; /* Safari */
}
​
body {
  font-family: sans-serif;
  background-color: antiquewhite;
}
​
ul {
  float: left;
  width: 80%;
  margin-left: 10%;
  background-color: #1FAAFA;
  padding: 0;
}
​
li {
  transition: all .2s ease-in;
  float: left;
  position: relative;
  width: 50%;
  height: 100%;
  min-height: 140px;
  list-style-type: none;
  color: white;
  overflow: hidden;
}
li:before {
  transition: all .2s ease-in;
  content: "";
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 16px 10px 0 10px;
  border-color: #ffffff transparent transparent transparent;
  position: absolute;
  left: 20px;
  top: -20px;
}
li:hover {
  border-top: 5px solid white;
}
li:hover:before {
  top: 0;
}
.holder {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.heading {
  font-size: 1.6em;
}
.subheading {
  font-size: 1.2em;
}
Output

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

Dismiss x
public
Bin info
anonymouspro
0viewers