CSS - div上的全对角透明角切割

Question

如何从div中剪掉整个角落,使其保持透明.

这就是我尝试过的:

  .well-corner {
    min-height: 20px;
    padding: 19px;
    margin-bottom: 20px;
    background: rgba(8, 12, 23, 0.8);
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
    border-top-right-radius: 50px;
  }
  .well-link {
    float: right;
  }
  .diagonal {
    float: left;
    width: 50px;
    transform: skewX(-10deg);
  }

<div class="well-corner clearfix">
  <div class="diagonal">
  </div>
  <a class="well-link" href="">Test</a>
</div>

结果:

通缉结果(图片编辑):

我在这里创建了一个JSFiddle:http://jsfiddle.net/x7fnxu2w/

Answer 1

演示 - http://jsfiddle.net/x7fnxu2w/3/

use::before用于设置三角形样式的伪元素,用于yellow border隐藏其他部分div

并使用border样式dotted来修复像素相关的问题

body {
  background-color: yellow;
}
.well-corner {
  min-height: 20px;
  padding: 19px;
  margin-bottom: 20px;
  background: rgba(8, 12, 23, 0.8);
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
  border-top-right-radius: 50px;
  position: relative;
  width: 430px;
}
.well-corner:before {
  content: '';
  display: inline-block;
  width: 0;
  height: 0;
  position: absolute;
  top: 0;
  left: 0;
  border-style: dotted;
  border-color: yellow rgba(56, 59, 18, 1) transparent transparent;
  border-width: 58px 53px 0px 0px;
}
.well-link {
  float: right;
}
.diagonal {
  float: left;
  width: 50px;
  transform: skewX(-10deg);
}

<!-- What I've tried -->
<div class="well-corner clearfix">
  <div class="diagonal"></div> <a class="well-link" href="">Test</a>

</div>
<!-- Edited image, wanted outcome -->
<img src="http://i.gyazo.com/7cb269f66e7b0bd3870c8b04ac52f4cd.png">