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

Question

你好 stackoverflow 的 friend 。

我的是我在很多 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;
}

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

Answer 1

答案就在这两页中:

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

和

http://bennettfeely.com/clippy/