有一种简单的方法可以只用CSS制作斜边,但透明。不需要svg,png等?
了解我到目前为止所做的工作:https://jsfiddle.net/Cafardo/zn5oysqy/5/
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);
}
}
}

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

请注意,白色角落应该是透明的,我认为可能会有某种jquery蒙版使斜面的白色div透明或者某种东西......你能帮助我吗?
答案 0 :(得分:2)
您可以使用渐变设置背景颜色,指示角度并说明渐变的第一部分是透明的。此外,您可以给透明部分。您可以删除用于创建效果的所有其他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>
&#13;