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。希望這可以幫助！

編輯：這是小提琴的updated version演示img容器的邊界和溢出屬性。正如CBroe所說，在這種情況下，旋轉一個圓圈可能不是一個很好的利用你的時間。另外，我絕對同意使用僞元素比嵌套圖像更簡潔。

Answer 3

代替嵌套元素，你可以只使用一個僞元素。這放在容器div的底部。爲此，您需要在容器格上使用position:relative和overflow:hidden。另外，僞元素總是需要content聲明。

要修改邊界半徑，只需使用pseudo元素的left | width | height。你不需要任何輪換。

代替十六進制顏色和不透明度，您可以使用「新」顏色空間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>