头部有弯曲的尖底 [英] Header with curved pointed bottom
本文介绍了头部有弯曲的尖底的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我需要创建蓝色/绿色区域,如下图所示。
使用 CSS 来达到这个目的的最佳方法是什么?我需要支持IE9 +或IE10 +如果IE9支持是不可能的。
我开始了一个基本的
解决方案
这里是我尝试css:
.header {
background:#415d67;
height:150px;
position:relative;
z-index:1;
}
.header:after {
position:absolute;
content:;
background:#415d67;
width:50%;
bottom:-20px;
right:0;
height:100%;
transform:skewY(-5deg);
transform-origin:right;
border-bottom-left-radius:50px;
padding-right:44px;
z-index:-1;
}
.header:before {
position:absolute;
content:;
background:#415d67;
width:50%;
bottom:-20px;
left:0;
height:100%;
transform:skewY(5deg);
transform-origin:left;
border-bottom-right-radius:50px;
padding-left:44px;
z-index:-1;
}
.content {
background:white;
padding:20px;
padding-top:100px;
}
您也可以考虑使用svg图形。
I need to create the bluey/green area that is shown in the picture below. It has angled sides coming down to a point that has a slight curve.
What is the best way to achieve this using CSS? I need to support IE9+ or IE10+ if IE9 support is not possible.
I have started a basic demo here - (Don't need the content within the bluey-green area)
解决方案
Here's my attempt with css only:
.header {
background: #415d67;
height: 150px;
position: relative;
z-index: 1;
}
.header:after {
position: absolute;
content: "";
background: #415d67;
width: 50%;
bottom: -20px;
right: 0;
height: 100%;
transform: skewY(-5deg);
transform-origin: right;
border-bottom-left-radius: 50px;
padding-right: 44px;
z-index: -1;
}
.header:before {
position: absolute;
content: "";
background: #415d67;
width: 50%;
bottom: -20px;
left: 0;
height: 100%;
transform: skewY(5deg);
transform-origin: left;
border-bottom-right-radius: 50px;
padding-left: 44px;
z-index: -1;
}
.content {
background: white;
padding: 20px;
padding-top: 100px;
}
You can also consider using an svg graphic.
这篇关于头部有弯曲的尖底的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文