一种在CSS3中曲线(外部)元素的方法

时间:2016-07-03 16:25:17

标签: css css3 curve

我正在尝试对元素进行曲线处理,然后在其中添加background-image属性。 我在看这个问题 - Is there a way to curve an element?。唯一的区别是,我希望它在外面弯曲。

以下是一个例子:

Example of curved-outside image

这就是我尝试做的事:http://jsfiddle.net/KcmfC/1148/

这个结果的问题是弯曲太多了。我找不到任何解决办法。

#test {
  background: url('http://www.planwallpaper.com/static/images/i-should-buy-a-boat.jpg') repeat center center / cover;
  border: 0px solid #000;
  width: 100%;
  min-height: 15em;
  border-radius: 0 0 100% 100%;
}
<div id="test"></div>

4 个答案:

答案 0 :(得分:2)

我所做的事情有点棘手,我把Undefined property: MongoDB\BSON\UTCDateTime::$milliseconds拉伸到140%而且我把它剪成了#34;边缘通过width。以下是我的完整示例:

&#13;
&#13;
overflow: hidden
&#13;
#test {
  position: relative;
  overflow: hidden;
  min-height:  150px;
}
#test:before {
    background: url('http://www.planwallpaper.com/static/images/i-should-buy-a-boat.jpg') repeat center center / 1048px 319px;
    border: 0px solid #000;
    content: "";
    width: 140%;
      height: 100%;
    border-radius: 0 0 100% 100%;
    position: absolute;
    z-index: -1;
    left: -20%;
    right: -20%;
}
&#13;
&#13;
&#13;

答案 1 :(得分:1)

您可以使用伪元素

&#13;
&#13;
div {
  background: gray url(http://www.planwallpaper.com/static/images/i-should-buy-a-boat.jpg) no-repeat center bottom -25px / cover;
  height: 180px;
  position: relative;      
}
div:after {
  content: '';
  background: gray url(http://www.planwallpaper.com/static/images/i-should-buy-a-boat.jpg) no-repeat center bottom / cover;
  border-radius: 50%;
  width: 100%;
  height: 50px;
  top: calc(100% - 25px);
  left:0;
  position: absolute;
}
&#13;
<div></div>
&#13;
&#13;
&#13;

答案 2 :(得分:0)

减少border radius pourentage

body{
  margin:0
    }

#test {
    background: url('http://www.planwallpaper.com/static/images/i-should-buy-a-boat.jpg') repeat center center / cover;
    border: 0px solid #000;
    width: 100%;
    min-height: 15em;
    border-radius: 0 0 35% 35%;
}
<div id="test">
</div>

答案 3 :(得分:0)

这个怎么样?

#test {
  background: url('http://www.planwallpaper.com/static/images/i-should-buy-a-boat.jpg') repeat center center / cover;
  border: 0px solid #000;
  width: 100%;
  min-height: 15em;
  border-radius: 0 0 70% 70% / 20%;
}
<div id="test"></div>