动画丝带与CSS - 丝带位置 [英] Animated Ribbon with CSS - Ribbon Position

问题描述

JSFiddle：

JSFiddle: http://jsfiddle.net/jvtt8kgz/

HTML:

<div style="width: 99%; margin: 0; padding: 0; text-align: left; overflow: hidden;">
    <div style="width: 33%; float: left; overflow: hidden; text-align: center; margin: 15px 0 15px 0;">
        <div id="mPra" lang="is" class="mainHolder imgPra">
            <figure>
                <figcaption class="fig11">Group Profile</figcaption>
                <figcaption class="fig22">Edit</figcaption>
            </figure>
        </div>
    </div>
    <div style="width: 33%; float: left; overflow: hidden; text-align: center; margin: 15px 0 15px 0;">
        <div id="mPro" lang="is" class="mainHolder imgPro">
            <figure>
                <figcaption class="fig11">Provider Profile</figcaption>
                <figcaption class="fig22">Edit</figcaption>
            </figure>
        </div>
    </div>
    <div style="width: 33%; float: left; overflow: hidden; text-align: center; margin: 15px 0 15px 0;">
        <div id="mSit" lang="is" class="mainHolder imgSit">
            <figure>
                <figcaption class="fig11">Site Profile</figcaption>
                <figcaption class="fig22">Edit</figcaption>
            </figure>
        </div>
    </div>
    <br style="clear: both;" />
    <div style="width: 50%; float: left; overflow: hidden; text-align: center; margin: 15px 0 15px 0;">
        <div id="mCli" lang="is" class="mainHolder imgCli">
            <figure>
                <figcaption class="fig11">Client Profile</figcaption>
                <figcaption class="fig22">Edit</figcaption>
            </figure>
        </div>
    </div>
    <div style="width: 50%; float: left; overflow: hidden; text-align: center; margin: 15px 0 15px 0;">
        <div id="mAcc" lang="is" class="mainHolder imgAcc">
            <figure>
                <figcaption class="fig11">Accountable Party Profile</figcaption>
                <figcaption class="fig22">Edit</figcaption>
            </figure>
        </div>
    </div>
</div>

How can I modify the CSS for class fig22, so that it comes opposite (top left, along with the cutout matching the corners) of the class fig11.

Example:

解决方案

Very Simple:

1-

.mainHolder figure {
    margin: 0; /* add this */
    padding: 0; /* add this */
}

2-

.mainHolder figcaption.fig11 {
    left: -30px; /* change this */
    bottom: 30px; /* change this */
}
.mainHolder figure:hover figcaption.fig22 {
    left: -120px; /* change this */
    top: 30px; /* change this */
}

Demo: http://jsfiddle.net/jvtt8kgz/3/

这篇关于动画丝带与CSS - 丝带位置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！