html – 带有弯曲尖底的标题

概述我需要创建如下图所示的蓝色/绿色区域.它有倾斜的边缘下降到一个略有曲线的点. 使用CSS实现这一目标的最佳方法是什么？如果无法支持IE9,我需要支持IE9或IE10. 我已经开始了一个基本的demo here – (不需要蓝绿色区域内的内容) 这是我对css的尝试： .header { background: #415d67; height: 150px; position: rela 我需要创建如下图所示的蓝色/绿色区域.它有倾斜的边缘下降到一个略有曲线的点.

使用CSS实现这一目标的最佳方法是什么？如果无法支持IE9,我需要支持IE9或IE10.

我已经开始了一个基本的demo here – (不需要蓝绿色区域内的内容)

解决方法 这是我对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;}

JSBIN demo

您还可以考虑使用svg图形.

总结

以上是内存溢出为你收集整理的html – 带有弯曲尖底的标题全部内容，希望文章能够帮你解决html – 带有弯曲尖底的标题所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。