html - 片側円形効果の作り方

Question

こんにちは、すべての開発者とウェブデザイナーです。私は、Twitter のブートストラップを使って、この写真のような片側循環効果を作成したいと考えています。左側に円形の曲線があり、右側に長方形の直線がありますが、長方形は左側に効果があり、写真で見ることができます。どうすればこのようなものを作成できますか? ありがとう。

Answer 1

このデモを見てください

CSS

body {
    background-color: #555;
}
#outer {
    margin: 100px auto;
    background-color: black;
    border-radius: 10px;
    width: 600px;
    height: 200px;
    text-align: center;
    color: white;
    font-size: 25px;
    line-height: 200px;
}

#inner {
    width: 200px; height: 200px;
    position: relative;
    background: url(http://i.imgur.com/fqct5Us.gif) center;
    border-radius: 1000px;
    overflow: hidden;
    border: 10px solid black;
    float: left;
    -webkit-transform: scale(1.4);
       -moz-transform: scale(1.4);
        -ms-transform: scale(1.4);
         -o-transform: scale(1.4);
            transform: scale(1.4);
}

#inner:before {
    content: '';
    position: absolute;
    height: 200px; width: 50px;
    left: 30px; bottom: -110px;
    display: inline-block;
    background-color: black;
    -webkit-transform: rotate(-45deg);
       -moz-transform: rotate(-45deg);
        -ms-transform: rotate(-45deg);
         -o-transform: rotate(-45deg);
            transform: rotate(-45deg);
}

HTML

<div id="outer">
        I am lorem. &larr; Huh?
    <div id="inner">
    </div>
</div>