创建倾斜/不规则形状div

我想知道是否可以使用CSS3创建此类型的div形状。创建倾斜/不规则形状div

example

我知道你可以使用边框的做的事情，如this，但反正是有得到这样的边界图像中（跨越的div他整个顶部和底部） - 和奖金点，为它做它响应（％宽度？）

.cornered { 
    width: 160px; 
    height: 0px; 
    border-bottom: 40px solid red; 
    border-right: 40px solid white; 
}

的任何链接，小提琴，建议将不胜感激。

来源

2013-10-07 Jon Kyte

[裁剪和遮掩使用CSS（http://www.hongkiat.com/blog/css-masking/） – Itay

你可以使用你所提到的CSS三角形技术，然后将它夹。 – ediblecode

[我怎样才能用css3和html5制作不规则形状的div？]（http://stackoverflow.com/questions/12126731/how-can-i-make-a-div-with-irregular-shapes -with-css3-and-html5） – TylerH

正如我在评论中提及，我创建了一个倾斜三角形（如果去掉填充CSS，你会看到），然后添加填充，使你不能看到三角形的尖端，

.cornered { 
    width: 160px; 
    height: 0px; 
    border-top: 60px solid transparent; 
    border-bottom: 60px solid transparent; 
    border-left: 280px solid blue; 
    padding:60px; 
}

Fiddle

来源

2013-10-07 11:40:23 ediblecode

这只适用于修正宽度吗？在我的这个实现中，我需要它来展开整个页面，用隐藏的“clip”溢出的三角形的末端（隐藏溢出）。对此有何想法？ –

不幸的是，你不能在剪辑或边框中使用基于％的值。因此，我认为不可能为您创建一个仅用于CSS的解决方案。但是，使用jQuery，你可以手动设置px值在页面加载和调整大小？ – ediblecode

随着你更新的小提琴，我玩了一圈，只是决定设置我的网页的最高宽度（1200px），然后将它放在一个容器中，用“overflow：hidden;'这给了我需要的效果。非常感谢你的帮助！ http://jsfiddle.net/2ExQK/3/ –

你能做到这一点

CSS

.irregular-shape { 
      border-left: 1500px solid black; 

      padding: 50px; 
      border-top: 100px solid transparent; 
      border-bottom: 100px solid transparent; 
     }

标记

<div class="irregular-shape"></div>

来源

2013-10-07 11:42:51

创建倾斜/不规则形状div

回答

相关问题