CSS透明形状

Question

This is what i am trying to achive

私が持っている：

#image1 { 
 
    position: absolute; 
 
    bottom: 0px; 
 
    align-self: auto; 
 
    background-color: #dc022e; 
 
    width: 340px; 
 
    height: 100px; 
 
    border-radius: 50%/100%; 
 
    border-bottom-left-radius: 0; 
 
    /*transform: rotate(10deg);*/ 
 
    border-bottom-right-radius: 0; 
 
    opacity: 0.8; 
 
    } 
 
    
 
    #image2 img { 
 
    width: 80%; 
 
    }

<div> 
 
    <div id="image2"> 
 
    <img src="http://t1.gstatic.com/images?q=tbn:ANd9GcThtVuIQ7CBYssbdwtzZjVLI_uw09SeLmyrxaRQEngnQAked5ZB"> 
 
    </div> 
 
    <div id="image1"></div> 
 
</div>

最後に、私はそれを回転させるようにする方法を知っていると余白が絵

でのようにカットしていません

Answer 1

これの簡単な例は、疑似要素を使用し、イメージをバックグラウンドで設定します。代わりに、ネストされた要素の

div { 
 
    position: relative; 
 
    height: 300px; 
 
    width: 500px; 
 
    background: url(http://lorempixel.com/500/300);/*image path*/ 
 
    overflow: hidden;/*hides the rest of the circle*/ 
 
} 
 

 
div:before { 
 
    content: ""; 
 
    position: absolute; /*positions with reference to div*/ 
 
    top: 100%; 
 
    left: 50%; 
 
    width: 0;/*define value if you didn't want hover*/ 
 
    height: 0; 
 
    border-radius: 50%; 
 
    background: tomato;/*could be rgba value (you can remove opacity then)*/ 
 
    opacity: 0.5; 
 
    transform: translate(-50%, -50%);/*ensures it is in center of image*/ 
 
    transition: all 0.4s; 
 
} 
 

 

 
/*Demo Only*/ 
 
div:hover:before {/*place this in your pseudo declaration to remove the hover*/ 
 
    height: 100%; 
 
    width: 150%;/*this makes the shape wider than square*/ 
 
    transform: translate(-50%, -50%) rotate(5deg);/*ensures it is in center of image + rotates*/ 
 
} 
 
div {/*This stuff is for the text*/ 
 
    font-size: 40px; 
 
    line-height: 300px; 
 
    text-align: center; 
 
}

<div>HOVER ME</div>

Answer 2

画像にはposition: absolute、オーバーレイ広告にはposition: relativeを使用できますあなたのニーズに合わせてトップポジションとワイドポジションを調整できます。ここにはFiddleがあります。お役に立てれば！

編集： imgコンテナの境界線とオーバーフロープロパティを示すフィドルのupdated versionは次のとおりです。 CBroeが述べているように、この場合、サークルを回転させるのはおそらくあなたの時間を有効に活用するものではありません。また、擬似要素の使用は、イメージを入れ子にするよりはるかにクリーンなアプローチであることにはっきりと同意します。

Answer 3

、あなただけの擬似要素を使用することができます。これはコンテナdivの一番下に配置されます。これを行うには、コンテナdivにposition:relativeとoverflow:hiddenが必要です。また、疑似要素には常にcontent宣言が必要です。

境界線の半径を変更するには、擬似要素のleft | width | heightで再生します。ローテーションは必要ありません。

16進数の色と不透明度の代わりに、rgba(r,g,b,a)という新しい色空間を使用できます。ここで、aは不透明度の値です。

パスポートパスについては、単にborder宣言を使用します。

#image2{ 
 
    position:relative; 
 
    border:10px solid #888; 
 
    overflow:hidden; 
 
    box-shadow:0 0 4px #aaa; 
 
} 
 

 
#image2::after { 
 
    content:""; 
 
    display:block; 
 
    position: absolute; 
 
    bottom: 0;left:-10%; 
 
    background-color: #dc022e; 
 
    width: 120%; 
 
    height: 60%; 
 
    border-radius: 100% 100% 0 0; 
 
    opacity: 0.8; 
 
} 
 
    
 
#image2 img { 
 
    width: 100%; 
 
    display:block; 
 
    position:relative; 
 
}

<div id="image2"> 
 
    <img src="http://t1.gstatic.com/images?q=tbn:ANd9GcThtVuIQ7CBYssbdwtzZjVLI_uw09SeLmyrxaRQEngnQAked5ZB"> 
 
    </div>