我想知道是否可以使用CSS3创建这种类型的div形状。
我知道你可以使用边框来做this这样的事情,但无论如何都要像图片中那样获得边框(跨越div的顶部和底部) - 以及奖励积分,为它做响应(%宽度?)
.cornered {
width: 160px;
height: 0px;
border-bottom: 40px solid red;
border-right: 40px solid white;
}
任何链接,小提琴,建议都将不胜感激。
答案 0 :(得分:3)
正如我在评论中提到的,我创建了一个倾斜的三角形(如果你删除了你将看到的填充CSS),然后添加填充,这样你就看不到三角形的尖端
.cornered {
width: 160px;
height: 0px;
border-top: 60px solid transparent;
border-bottom: 60px solid transparent;
border-left: 280px solid blue;
padding:60px;
}
答案 1 :(得分:0)
你可以这样做
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>