作者热门文章
- c - 在位数组中找到第一个零
- linux - Unix 显示有关匹配两种模式之一的文件的信息
- 正则表达式替换多个文件
- linux - 隐藏来自 xtrace 的命令
我需要创建下图所示的蓝色/绿色区域。它有倾斜的边,向下延伸到一个略微 flex 的点。
使用 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;
}
您也可以考虑使用 svg 图形。
关于html - 带弧形尖底的表头,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36392688/
一直在思考什么是获得带有尖 Angular 的背景图像的最佳方式。我尝试了一些 css,例如 border-radius 和 clip-path 但没有成功。我想 clip-path 是最接近的可能答
我是一名优秀的程序员,十分优秀!