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>
最后我不知道如何使其旋转并且边缘切割如图所示
解决方法
一个简单的例子是使用伪元素并在背景中设置图像.
- 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>
