将图像放入没有曲率的平行四边形内
Put image inside paralelogram without curvature
我需要将图像放在平行四边形中。我尝试使用 transform: skewX(45deg)
但它的曲率图像。我该怎么写?
我的代码:
<div class="offers-container">
<div class="red line"></div>
<div class="row">
<div class="col-4" *ngFor="let car of cars|async">
<div class="car-img-container" [ngStyle]="{backgroundImage: 'url('+car.image_url[0]+')'}">
</div>
</div>
</div>
<div class="right-top red-triangle"></div>
<div class="right-top black-triangle"></div>
<div class="left-bottom red-triangle"></div>
<div class="bottom">
<div class="red line row">
<div class="col-4" *ngFor="let car of cars|async">
<label class="title">
{{car.make}} {{car.model}} {{car.year}}
</label>
</div>
</div>
<div class="black line"></div>
</div>
<div class="left-bottom black-triangle"></div>
</div>
$red: #EA2340;
$black: #062639;
.offers-container {
height: max-content;
position: relative;;
}
.line {
width: 100%;
height: 2vh;
margin: 0;
}
.red {
background: $red !important;
}
.black {
background: $black !important;
}
.bottom {
bottom: 0;
position: relative;
width: 100%;
.line {
height: 6vh;
}
}
.black-triangle {
width: 0;
height: 0;
border-left: transparent solid 50px;
border-bottom: transparent solid 50px;
border-right: $black solid 50px;
border-top: $black solid 50px;
}
.red-triangle {
width: 0;
height: 0;
border-left: transparent solid 100px;
border-bottom: transparent solid 100px;
border-right: $red solid 100px;
border-top: $red solid 100px;
}
.right-top {
position: absolute;
right: 0;
top: 0;
}
.left-bottom {
transform: rotate(180deg);
position: absolute;
left: 0;
bottom: 0;
}
.col-4 {
padding: 0;
}
.car-img-container {
padding-top: 56.25%;
background-size: 100% auto;
transform: skewX(45deg);
}
.title {
font: Bold 32px/38px Bebas Neue;
color: #FFFFFF;
z-index: 1;
position: relative;
transform: translate(90%, -50%);
top: 50%;
}
我的结果
结果没有 transform:skewX(45deg)
我解决了这个问题,也许它会对某人有所帮助
改变了什么:
Html
<div class="col-4" *ngFor="let car of cars|async">
<div class="car-img-container" [ngStyle]="{backgroundImage: 'url('+car.image_url[0]+')'}">
</div>
</div>
到
<div class="col-4" *ngFor="let car of cars|async">
<div class="car-img-container">
<div class="car-image"[ngStyle]="{backgroundImage: 'url('+car.image_url[0]+')'}"></div>
</div>
</div>
Css
.car-img-container {
padding-top: 56.25%;
background-size: 100% auto;
transform: skewX(45deg);
}
到
.car-img-container {
transform: skewX(45deg);
position: relative;
overflow: hidden;
}
.car-image {
padding-top: 56.25%;
background-size: cover;
transform: skewX(-45deg) scale(1.6);
}
我收到了什么
我需要将图像放在平行四边形中。我尝试使用 transform: skewX(45deg)
但它的曲率图像。我该怎么写?
我的代码:
<div class="offers-container">
<div class="red line"></div>
<div class="row">
<div class="col-4" *ngFor="let car of cars|async">
<div class="car-img-container" [ngStyle]="{backgroundImage: 'url('+car.image_url[0]+')'}">
</div>
</div>
</div>
<div class="right-top red-triangle"></div>
<div class="right-top black-triangle"></div>
<div class="left-bottom red-triangle"></div>
<div class="bottom">
<div class="red line row">
<div class="col-4" *ngFor="let car of cars|async">
<label class="title">
{{car.make}} {{car.model}} {{car.year}}
</label>
</div>
</div>
<div class="black line"></div>
</div>
<div class="left-bottom black-triangle"></div>
</div>
$red: #EA2340;
$black: #062639;
.offers-container {
height: max-content;
position: relative;;
}
.line {
width: 100%;
height: 2vh;
margin: 0;
}
.red {
background: $red !important;
}
.black {
background: $black !important;
}
.bottom {
bottom: 0;
position: relative;
width: 100%;
.line {
height: 6vh;
}
}
.black-triangle {
width: 0;
height: 0;
border-left: transparent solid 50px;
border-bottom: transparent solid 50px;
border-right: $black solid 50px;
border-top: $black solid 50px;
}
.red-triangle {
width: 0;
height: 0;
border-left: transparent solid 100px;
border-bottom: transparent solid 100px;
border-right: $red solid 100px;
border-top: $red solid 100px;
}
.right-top {
position: absolute;
right: 0;
top: 0;
}
.left-bottom {
transform: rotate(180deg);
position: absolute;
left: 0;
bottom: 0;
}
.col-4 {
padding: 0;
}
.car-img-container {
padding-top: 56.25%;
background-size: 100% auto;
transform: skewX(45deg);
}
.title {
font: Bold 32px/38px Bebas Neue;
color: #FFFFFF;
z-index: 1;
position: relative;
transform: translate(90%, -50%);
top: 50%;
}
我的结果transform:skewX(45deg)
我解决了这个问题,也许它会对某人有所帮助 改变了什么: Html
<div class="col-4" *ngFor="let car of cars|async">
<div class="car-img-container" [ngStyle]="{backgroundImage: 'url('+car.image_url[0]+')'}">
</div>
</div>
到
<div class="col-4" *ngFor="let car of cars|async">
<div class="car-img-container">
<div class="car-image"[ngStyle]="{backgroundImage: 'url('+car.image_url[0]+')'}"></div>
</div>
</div>
Css
.car-img-container {
padding-top: 56.25%;
background-size: 100% auto;
transform: skewX(45deg);
}
到
.car-img-container {
transform: skewX(45deg);
position: relative;
overflow: hidden;
}
.car-image {
padding-top: 56.25%;
background-size: cover;
transform: skewX(-45deg) scale(1.6);
}
我收到了什么