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>