jquery - 边框斜 Angular 透明仅使用 css

Question

有一种简单的方法可以仅使用 CSS 制作斜 Angular 边缘，但透明。不需要 svg、png 等吗？

看看我到目前为止做了什么:https://jsfiddle.net/Cafardo/zn5oysqy/5/

.home_fundo{
   width: 300px;
   height: auto;
   background: url(http://www.simi.org.br/files/Janeiro%20-%202017/11096.jpg);
}
.home_banner_caixa {
  width: 200px;
  max-width: 400px;
  height: auto;
  position: relative;
  background-color: #c77316;
  padding: 20px;
  font-size: 12px;
  color: #ffffff;
}

.home_banner_caixa_chanfro {
  width: 70px;
  height: 70px;
  position: absolute;
  top: -10px;
  right: -10px;
  -ms-transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  transform: rotate(45deg);
}

.home_banner_caixa_chanfro1 {
  width: 70px;
  height: 35px;
  display: block;
  background-color: #ffffff;
}

.home_banner_caixa_chanfro2 {
  width: 70px;
  height: 35px;
  display: block;
  background-color: #c77316;
}

<div class="home_fundo">
  <div class="home_banner_caixa">
    <div class="home_banner_caixa_chanfro">
      <div class="home_banner_caixa_chanfro1"></div>
      <div class="home_banner_caixa_chanfro2"></div>
    </div>
    <h1>
      Lorem ipsum
      <br> dolor sit amet, consectetur adipiscing elit. Duis vitae augue ut mi fermentum sodales. Sed euismod est mollis sem malesuada, vitae placerat est congue
    </h1>
  </div>
</div>

请注意，白色 Angular 应该是透明的，我想可能有某种 jquery mask 可以使斜 Angular 的白色 div 透明或其他...你能帮我吗？

Answer 1

可以用渐变设置背景颜色，表示 Angular 并表示渐变的第一部分是透明的。另外，您还可以为透明部分添加一个“with”。您可以删除用于创建效果的所有其他 div。

希望这有帮助

试试这个

.home_fundo{
   width: 300px;
   height: auto;
   background: url(http://www.simi.org.br/files/Janeiro%20-%202017/11096.jpg);
}
.home_banner_caixa {
  width: 200px;
  max-width: 400px;
  height: auto;
  position: relative;
  padding: 20px;
  font-size: 12px;
  color: #ffffff;

  background:
  linear-gradient(225deg, transparent 50px, #c77316 0) top right;
  background-repeat: no-repeat;
}

    <div class="home_fundo">
      <div class="home_banner_caixa">
        <h1>
          Lorem ipsum
          <br> dolor sit amet, consectetur adipiscing elit. Duis vitae augue ut mi fermentum sodales. Sed euismod est mollis sem malesuada, vitae placerat est congue
        </h1>
      </div>