css - CSS3 中的曲线 block

标签 css

我想知道是否有办法让 block 具有 [这种形状][1](任何 CSS 解决方案,也包括 3D)。 我试过 border-radius 但你不能有负值。

谢谢。

编辑:

对于缺少信息,我深表歉意,但我位于一个街区,而不是边界(图像不好,我的错)。 实际上它是用来做丝带的,我希望它有点 flex ,比如this one , 因为我必须在里面写文字,所以它不能是边框。

如果它在 CSS 而不是 Canvas/SVG 中可行,那就太好了。

再次感谢。

编辑: 完毕!更多详情:http://forrst.com/posts/CSS3_Curved_Ribbon-IyB

最佳答案

http://jsfiddle.net/efortis/E6SRf/1

<div class="clipper">
  <div class="shape"> </div> 
</div>


.shape{
 border-radius: 600px;
 width: 600px;
 height: 600px;
 border: 4px solid black;
}

.clipper {
 width: 610px;
 height: 150px;
 overflow:hidden;
}

关于css - CSS3 中的曲线 block ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/6740849/

相关文章:

css - 根据 WCAG 2.0,在 alt ="text"中使用的字符限制是多少?

jquery - 如何编辑 Bootstrap 移动折叠下拉菜单布局?

jquery - 如何选择动态添加的元素

html - 制作网格类并污染 HTML 或独立创建页面部分样式?

html - 即使指定 "repeat-x", body 上的图像也不重复

javascript - 如何使用 javascript 创建一个计时器,以便它创建一个 div 元素来显示 javascript 执行的时间

android - 删除按钮边框 - nativescript

css - Safari 中的响应列

jquery - 如何将 div 设置为可见性 :hidden to display using jQuery?

html - 如何使用 css 修复子菜单变宽 100%