triangle buttons

by jpeter06

HTML

<table>
<tr>
  <td class="container">
    <diV class="edit" onclick="editClick()">
      <span>+</span>
    </diV>
    <div class="options" onclick="optionsClick()">
      <span>...</span>
    </div>
  </td>
</tr>
</table>

SCSS

.container{
  position:relative;
  width:39px;
  height:37px;
  background:gray;
  margin:0px;
  padding:0px;
}

.options{
  position:absolute;
  top:0px;
  left:0px;
  width:100%;
  height:100%;
  background:#e6e6e6;
  clip-path: polygon(100% 0, 0 100%, 100% 100%);
  cursor: pointer;
  span {
    position: absolute;
    left: 50%;
    top: 40%;
    user-select:none;
  }
  &:hover{
  background:#fafafa;
  }
}

.edit::before {
        content: url("data:image/svg+xml; utf8, <svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24'><path d='M7.127 22.562l-7.127 1.438 1.438-7.128 5.689 5.69zm1.414-1.414l11.228-11.225-5.69-5.692-11.227 11.227 5.689 5.69zm9.768-21.148l-2.816 2.817 5.691 5.691 2.816-2.819-5.691-5.689z' fill='gray' stroke='none'/></svg>");
        display: block;
        width: 20px;
        height: 10px;
        margin: 5px 5px 0 5px;
    }

.edit{
  position:absolute;
  top:0px;
  left:0px;
  width:100%;
  height:100%;
  background:#eee;
  clip-path: polygon(100% 0, 0 0, 0 100%);
  cursor: pointer;
  span {
    position: absolute;
    left: 20%;
    top: 10%;
    user-select:none;
  }
  &:hover{
    background:#fafafa;
  }
}

JavaScript

function editClick(){
	alert("edit click");
}

function optionsClick(){
	alert("options click");
}