只用css边框斜面透明

Question

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

了解我到目前为止所做的工作：https://jsfiddle.net/Cafardo/zn5oysqy/5/

＆＃13;

＆＃13;

public class MyClass {
    private static String A_DIR;
    private static String A_DATASET;

    public MyClass() {
        init();
    }

    private void init() {
        try {
            propertyFinder = MyOtherClass.getPropertyFinder();
            A_DIR = propertyFinder.getTheDirectory();
            A_DATASET = propertyFinder.getTheDataSet();
            String abc = "xyz";
        }
         catch (IOException ieo) {
            log.error(ieo.getMessage(), ieo);
        }
    }
}

＆＃13;

.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;
}

＆＃13;

＆＃13;

＆＃13;

请注意，白色角落应该是透明的，我认为可能会有某种jquery蒙版使斜面的白色div透明或者某种东西......你能帮助我吗？

Answer 1

您可以使用渐变设置背景颜色，指示角度并说明渐变的第一部分是透明的。此外，您可以给透明部分。您可以删除用于创建效果的所有其他div。

希望这有帮助

试试这个

＆＃13;

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;