引导不同形状的图像

Question

我建立了这个模型：

我想知道这种类型的图库是否可以使用bootstrap构建，我还没有开始编码，因为我觉得它因行而无法工作。
我希望得到一些第二意见，那些使用过bootstrap的人比我长。

Answer 1

我发现了一些真正有用的东西!! 而且它的反应灵敏！ ：d

.poligono, .poligono div {
    margin: 0 auto;
    transform-origin: 50% 50%;
    overflow: hidden;
    width: 250px;
    height: 250px;
}
.poligono {
    transform: rotate(45deg) translateY(10px);
}
.poligono .los1 {
    width: 355px;
    height: 355px;
    transform: rotate(-45deg) translateY(-74px);
}
.poligono .los1 img {
    width: 100%;
    height: auto;
    -moz-transition: all 0.6s;
    -webkit-transition: all 0.6s;
    transition: all 0.6s;
}

.poligono:hover img {
    -moz-transform: scale(1.3);
    -webkit-transform: scale(1.3);
    transform: scale(1.3);
}



<div id="projects" class="projects">
    <div class="container">
        <div class="row">
            <div class="col-md-offset-9 col-md-3">
                <h2>Projects</h2>
            </div>
        </div>

        <div class="row">
            <div class="col-md-4">
               <div class="poligono">
                    <div class="los1">
                        <a href="#"><img class=" img-responsive" src="img/project_1.jpg" alt="Projecto 1 UNlogical"/> </a>
                        <p class="descricao">Cenas maradas acontecem</p>
                    </div>
                </div>
            </div>
            <div class="col-md-4">
                <div class="poligono">
                    <div class="los1">
                        <a href="#"><img class=" img-responsive" src="img/project_1.jpg" alt="Projecto 1 UNlogical"/> </a>
                    </div>
                </div>
            </div>
            <div class="col-md-4">
                <div class="poligono">
                    <div class="los1">
                        <a href="#"><img class=" img-responsive" src="img/project_1.jpg" alt="Projecto 1 UNlogical"/> </a>
                    </div>
                </div>
            </div>
        </div>

        <div class="row">
            <div class="col-md-offset-2 col-md-4">
                <div class="poligono">
                    <div class="los1">
                        <a href="#"><img class=" img-responsive" src="img/project_1.jpg" alt="Projecto 1 UNlogical"/> </a>
                    </div>
                </div>
            </div>
            <div class="col-md-4">
                <div class="poligono">
                    <div class="los1">
                        <a href="#"><img class=" img-responsive" src="img/project_1.jpg" alt="Projecto 1 UNlogical"/> </a>
                    </div>
                </div>
            </div>
         </div>

         <div class="row">
            <div class="col-md-4">
               <div class="poligono">
                    <div class="los1">
                        <a href="#"><img class=" img-responsive" src="img/project_1.jpg" alt="Projecto 1 UNlogical"/> </a>
                    </div>
                </div>
            </div>
            <div class="col-md-4">
                <div class="poligono">
                    <div class="los1">
                        <a href="#"><img class=" img-responsive" src="img/project_1.jpg" alt="Projecto 1 UNlogical"/> </a>
                    </div>
                </div>
            </div>
            <div class="col-md-4">
                <div class="poligono">
                    <div class="los1">
                        <a href="#"><img class=" img-responsive" src="img/project_1.jpg" alt="Projecto 1 UNlogical"/> </a>
                    </div>
                </div>
            </div>
        </div>

        <div class="row">
            <div class="col-md-offset-2 col-md-4">
                <div class="poligono img-responsive">
                    <div class="los1">
                        <a href="#"><img class=" img-responsive" src="img/project_1.jpg" alt="Projecto 1 UNlogical"/> </a>
                    </div>
                </div>
            </div>
            <div class="col-md-4">
                <div class="poligono img-responsive">
                    <div class="los1">
                        <a href="#"><img class=" img-responsive" src="img/project_1.jpg" alt="Projecto 1 UNlogical"/> </a>
                    </div>
                </div>
            </div>
        </div>

        <div class="row margin-bottom">
            <div class="col-md-4">
               <div class="poligono">
                    <div class="los1">
                        <a href="#"><img class=" img-responsive" src="img/project_1.jpg" alt="Projecto 1 UNlogical"/> </a>
                    </div>
                </div>
            </div>
            <div class="col-md-4">
                <div class="poligono">
                    <div class="los1">
                        <a href="#"><img class=" img-responsive" src="img/project_1.jpg" alt="Projecto 1 UNlogical"/> </a>
                    </div>
                </div>
            </div>
            <div class="col-md-4">
                <div class="poligono">
                    <div class="los1">
                        <a href="#"><img class=" img-responsive" src="img/project_1.jpg" alt="Projecto 1 UNlogical"/> </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

Answer 2

如果你问是否有默认的引导程序，答案是否定的。 但是，这可以用你自己的CSS来实现。

我不明白为什么你不能用以下内容扭曲图像：

img.tilted{
    -webkit-transform: rotate(45deg); 
    -moz-transform: rotate(45deg); 
    -o-transform: rotate(45deg);
    -ms-transform: rotate(45deg); 
}

如果你想要这个＆＃34;掩盖行为＆＃34;我不明白为什么你不能将所有图像放在下面的图层上并在顶部放一个透明的图像

或者您可以尝试将其剪辑为http://www.html5rocks.com/en/tutorials/masking/adobe/