如何将图像调整为html和css中的几何图形？

Question

你好stackoverflow的朋友。

我是在多个div中制作了一个几何图形，因为我做了一个疯狂的网站，但我不知道如何将图像调整到这些div中因为我的图像没有采用原始宽度而你在一个测试html文件中看看这是怎么回事损坏外观请帮帮我。这是这里的代码。

<div id="slider-container">
    <div id="container-child">
        <div class="css-shapes-preview" id="first-interfell-slide" /*style="background-image: url(images/_web-slider_back01.jpg); height: 75vh;"*/ >

            <img class="image-slider" src="images/_web-slider_back01.jpg" alt="first-main--slider-1">
        </div>
        <div class="css-shapes-preview" id="second--slide" /*style="background-image: url(images/_web-slider_back02.jpg); height: 75vh;"*/ >
            <img class="image-slider" src="images/_web-slider_back02.jpg" alt="first-main--slider-2">
        </div>
        <div class="css-shapes-preview" id="third--slide" /*style="background-image: url(images/_web-slider_back03.jpg); height: 75vh;"* >
            <img class="image-slider" src="images/_web-slider_back03.jpg" alt="first-main--slider-3">
        </div>
    </div>
</div>

css文件是：

    #slider-container{
    margin: 0;
    padding: 0;
    width: 350vw;
    display: block;
    min-width: 1200px;
    margin-left: -3em;
}
#container-child{
    width: 110vw;
    margin-left: -5rem;
}
.css-shapes-preview{ 
    position: relative;
    width: 33.33%;
    padding: 0px; 
    transform: translateX(-60px) rotate(0deg) skew(350deg);
    -webkit-transform: translateX(-60px) rotate(0deg) skew(350deg);
    float: left;
}
.slider-imgs-parttern{
    width: 50%;
}
.image-slider{
    height: 70vh;
    min-width: 500px;
}

原因是因为我想用三个图像做一个滑块。

Answer 1

答案在这两页中：

https://developer.mozilla.org/en-US/docs/Web/CSS/clip-path

和

http://bennettfeely.com/clippy/