我一直在尝试使用跨浏览器的CSS形状,我已经在Chrome和Safari中使用它没有任何问题,我似乎无法在Firefox中工作(尚未测试IE,不期待那样).
这是HTML：
这是CSS：
.container {
width: 960px;
margin: 0 auto;
}
section.hero {
padding: 8px;
Box-sizing: border-Box;
overflow: hidden;
width: 100%;
height: 400px;
float:left;
section.slide {
position:relative;
.shaped {
background-size: cover;
shape-outside: polygon(20% 0,100% 0,100% 100%,0% 100%);
clip-path: polygon(20% 0,0% 100%);
background-image: url(http://www.e-architect.co.uk/images/jpgs/aberdeen/bon_accord_centre_tonyfreeman221207_04.jpg);
height: 384px;
float:left;
width: 70%;
float: right;
shape-margin: 20px;
}
.hero-text {
Box-sizing: border-Box;
background-color: #333;
color: white;
padding: 30px;
height: 384px;
width: 50%;
h2 {
margin-bottom: 20px;
}
}
}
}
我尝试过一种Adobe形状的polyfill,它没有任何区别,是否有其他选择,或者我应该考虑完全改变设计？
谢谢
最佳答案
你可以使用svg的clipPath for cross-browser support.
.container {
width: 960px;
margin: 0 auto;
}
section.hero {
padding: 8px;
-moz-Box-sizing: border-Box;
Box-sizing: border-Box;
overflow: hidden;
width: 100%;
height: 400px;
float: left;
}
section.hero section.slide {
position: relative;
}
.shaped {
background: url(http://www.e-architect.co.uk/images/jpgs/aberdeen/bon_accord_centre_tonyfreeman221207_04.jpg);
height: 384px;
width: 100%;
}
section.hero section.slide .hero-text {
-moz-Box-sizing: border-Box;
Box-sizing: border-Box;
background-color: #333;
color: white;
padding: 30px;
height: 384px;
width: 50%;
}
section.hero section.slide .hero-text h2 {
margin-bottom: 20px;
}
svg {
float: right;
}
这里有些例子.
.container {
width: 960px;
margin: 0 auto;
}
section.hero {
padding: 8px;
-moz-Box-sizing: border-Box;
Box-sizing: border-Box;
overflow: hidden;
width: 100%;
height: 400px;
float: left;
}
section.hero section.slide {
position: relative;
}
.shaped {
background: url(http://www.e-architect.co.uk/images/jpgs/aberdeen/bon_accord_centre_tonyfreeman221207_04.jpg);
height: 384px;
width: 100%;
}
section.hero section.slide .hero-text {
-moz-Box-sizing: border-Box;
Box-sizing: border-Box;
background-color: #333;
color: white;
padding: 30px;
height: 384px;
width: 50%;
}
section.hero section.slide .hero-text h2 {
margin-bottom: 20px;
}
svg {
float: right;
}
.container {
width: 960px;
margin: 0 auto;
}
section.hero {
padding: 8px;
-moz-Box-sizing: border-Box;
Box-sizing: border-Box;
overflow: hidden;
width: 100%;
height: 400px;
float: left;
}
section.hero section.slide {
position: relative;
}
.shaped {
background: url(http://www.e-architect.co.uk/images/jpgs/aberdeen/bon_accord_centre_tonyfreeman221207_04.jpg);
height: 384px;
width: 100%;
}
section.hero section.slide .hero-text {
-moz-Box-sizing: border-Box;
Box-sizing: border-Box;
background-color: #333;
color: white;
padding: 30px;
height: 384px;
width: 50%;
}
section.hero section.slide .hero-text h2 {
margin-bottom: 20px;
}
svg {
float: right;
}
猜你在找的HTML相关文章
