即日起在codingBlog上分享您的技术经验即可获得积分,积分可兑换现金哦。

在CSS中反转圆角?

栈溢出 web-tiki 194℃ 0评论
本文目录
[隐藏]

1.原始问题:Invert rounded corner in CSS?

I have a css code:

-moz-border-radius-topleft:50px;

I get the result:

rounded corner

Is there any possibilities to give like this:

inverted rounded corner

2.被采纳答案

暂无被采纳答案,请参照下面其他答案。

3.其他高票答案

3.1.第1个答案

Just to update this, it seems you can in multiple ways.

Lea Verou posted a solution

Here is mine using border-image

4.Using border image

html

css

div {
    width: 200px;           
    border-width: 55px;
    -moz-border-image: url(http://i47.tinypic.com/2qxba03.png) 55 repeat;
    -webkit-border-image: url(http://i47.tinypic.com/2qxba03.png) 55 repeat;
    -o-border-image: url(http://i47.tinypic.com/2qxba03.png) 55 repeat;
    border-image: url(http://i47.tinypic.com/2qxba03.png) 55 repeat;
    margin: 50px auto;   
}

5.Using radial gradient

Lea Verou’s solution

html

css

.inner-round {
    background-image:
        radial-gradient(circle at 0 0, rgba(204,0,0,0) 14px, #c00 15px),
        radial-gradient(circle at 100% 0, rgba(204,0,0,0) 14px, #c00 15px),
        radial-gradient(circle at 100% 100%, rgba(204,0,0,0) 14px, #c00 15px),
        radial-gradient(circle at 0 100%, rgba(204,0,0,0) 14px, #c00 15px);
}

5.1.第2个答案

In modern browsers, you can use mask-image:

#aux-container {
  width: 100px;
  height: 100px;
  background: #f00;
  -webkit-mask-image: radial-gradient(circle 10px at 0 0, transparent 0, transparent 20px, black 21px);
}

http://jsbin.com/eViJexO/1/

Additionally, take a look at http://www.html5rocks.com/en/tutorials/masking/adobe/, which describes how to achieve similar result using mask-box-image.

5.2.第3个答案

Unfortunately, there is currently not a solution based on official or implemented CSS Specs 🙁

However, as other people have added, there are possible solutions (or cheats?) you can do to achieve the same effect using JS libraries or complex HTML/CSS implementations. I came across this issue whilst looking for a way to make even more complex corners than the OP without using images.

I have filed a bug (Feature Request) over at the webkit site – as there does not appear to be one filed already.

Bug 62458 – Feature Request: Inverse rounded corners

5.3.第4个答案

You can also use and inline svg with a path element:

body{background:url('http://i.imgur.com/RECDV24.jpg');background-size:cover;}
svg{width:30%;}

  

In this example, I use a cubic bezier curve for the inverted round edge.

With this approach, you can also fill the shape with an image or gradient:

body{background:url('http://i.imgur.com/RECDV24.jpg');background-size:cover;}
svg{width:30%;}

  
    
      
    
  
  

转载请注明:CodingBlog » 在CSS中反转圆角?

喜欢 (0)or分享 (0)
发表我的评论
取消评论

*

表情