一种在CSS3中弯曲(外部)元素的方法 [英] A way to curve (outside) an element in CSS3

问题描述

我试图弯曲一个元素，然后在其中添加 background-image 属性.我一直在寻找这个问题-

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

此结果中的问题是它弯曲太多.我找不到任何解决方案.

  #test {背景:url('http://www.planwallpaper.com/static/images/i-should-buy-a-boat.jpg')重复中心/封面；边框:0px实线#000；宽度:100％;最低高度:15em；边界半径:0 0 100％100％;}  

 < div id ="test"></div>  

解决方案

我做的事情有些棘手，我将 width 拉伸到140％，然后通过<代码>溢出:隐藏.这是我的完整示例:

  #test {职位:相对溢出:隐藏；最低高度:150像素；}#test:之前{背景:url('http://www.planwallpaper.com/static/images/i-should-buy-a-boat.jpg')重复居中居中/1048px 319px;边框:0px实线#000；内容: "";宽度:140％;高度:100％;边界半径:0 0 100％100％;位置:绝对；z索引:-1；左:-20％;正确:-20％；}  

 < div id ="test">< div>一些文本一些文本</div></div>  

I'm trying to curve an element and then add a background-image property in it. I was looking on this question - Is there a way to curve an element?. The only difference, is that I want it to be curved outside.

Here's an example:

This is what I tried to do: http://jsfiddle.net/KcmfC/1148/

The problem in this result is that it's too much curved. I can't find any solution for this.

#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>

解决方案

The thing I did is a bit tricky, I stretched the width to 140% and the I "cut" the edges via overflow: hidden. Here's my full example:

#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%;
}

<div id="test">
  <div>
 SOME TEXT SOME TEXT SOME 
  </div>
</div>

这篇关于一种在CSS3中弯曲(外部)元素的方法的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！