html - CSS - div 上的全对 Angular 线透明切 Angular

Question

我如何切掉一个 div 的完整 Angular ，使其保持透明。

这是我试过的:

  .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/

使用:伪元素:before用于设计所用三 Angular 形的样式 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">