是否可以填充背景颜色,这样就没有白色了?我在此屏幕截图中使用了剪辑路径 css 属性
Is it possible to fill in the background color so there's no white? I am using the clip-path css property in this screenshot
代码笔:https://codepen.io/yongelee/pen/eVobRd
我想让背景没有白色,所以基本上把白色 space 作为下一个方块背景的颜色。但不幸的是,当我剪辑路径时,div 不会从矩形变为梯形!
我的代码(JSX):
<Wrapper>
<HeroBlock>
<h1>hi</h1>
<h4>hihi</h4>
</HeroBlock>
<IntroBlock>
<h1>heyyy</h1>
<h4>YO??</h4>
</IntroBlock>
<SkillsBlock>
<h1>Heyy</h1>
<h4>okkk</h4>
</SkillsBlock>
</Wrapper>
const Wrapper = styled.div`
display: grid;
grid-template-columns: 1fr;
`
const HeroBlock = styled.div`
background: skyblue;
height: 50vh;
-webkit-clip-path: polygon(0 0, 100% 0, 100% 90%, 0% 100%);
clip-path: polygon(0 0, 100% 0, 100% 90%, 0% 100%);
`
const IntroBlock = styled.div`
background: orange;
padding-bottom: 100px;
-webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 90%);
clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 90%);
`
const SkillsBlock = styled.div`
background: red;
-webkit-clip-path: polygon(0 0, 100% 0, 100% 90%, 0% 100%);
clip-path: polygon(0 0, 100% 0, 100% 90%, 0% 100%);
`
为此使用样式组件。
好的,这是我想出的:
h1 {
margin-top:0;
}
.container {
display: grid;
grid-template-columns: 1fr;
}
.hero_cont {
background-color:orange;
}
.hero {
padding-top:21px;
background: skyblue;
height: 50vh;
-webkit-clip-path: polygon(0 0, 100% 0, 100% 90%, 0% 100%);
clip-path: polygon(0 0, 100% 0, 100% 90%, 0% 100%);
}
.intro_cont {
background-color:red;
}
.intro {
padding-top:21px;
background: orange;
padding-bottom: 100px;
-webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 90%);
clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 90%);
}
.skills_cont {
background-color:transparent;
}
.skills {
padding-top:21px;
background: red;
-webkit-clip-path: polygon(0 0, 100% 0, 100% 90%, 0% 100%);
clip-path: polygon(0 0, 100% 0, 100% 90%, 0% 100%);
}
<div class="container">
<div class='hero_cont'>
<div class="hero">
<h1>Hey</h1>
<h4>heyy</h4>
</div>
</div>
<div class='intro_cont'>
<div class="intro">
<h1>Hii</h1>
<h4>Yoo</h4>
</div>
</div>
<div class='skills_cont'>
<div class="skills">
<h1>One</h1>
<h4>Noooo</h4>
</div>
</div>
</div>
简单地考虑一些像这样的负边距:
.container {
display: grid;
grid-template-columns: 1fr;
}
.hero {
background: skyblue;
height: 50vh;
-webkit-clip-path: polygon(0 0, 100% 0, 100% 90%, 0% 100%);
clip-path: polygon(0 0, 100% 0, 100% 90%, 0% 100%);
}
.intro {
margin-top: -40px;
background: orange;
padding-bottom: 100px;
-webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 90%);
clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 90%);
}
.skills {
margin-top: -40px;
background: red;
-webkit-clip-path: polygon(0 0, 100% 0, 100% 90%, 0% 100%);
clip-path: polygon(0 0, 100% 0, 100% 90%, 0% 100%);
}
<div class="container">
<div class="hero">
<h1>Hey</h1>
<h4>heyy</h4>
</div>
<div class="intro">
<h1>Hii</h1>
<h4>Yoo</h4>
</div>
<div class="skills">
<h1>One</h1>
<h4>Noooo</h4>
</div>
</div>
我想将剪辑路径添加到 div 中,但不限于部分。我可以剪辑 div,我可以在部分上制作线性渐变,所以剪辑路径之前的部分例如是红色,所以剪辑所在部分的顶部也是红色,底部是蓝色,bc 下一节会变蓝它单独很好的内容 :D
.section-stats {
background: linear-gradient(to bottom, rgb(247, 247, 247), rgba(0, 0, 0, 0));
position: relative;
width: 100%;
padding: 5rem 0;
// this is element which we want to clip
&--clip {
height: 100%;
width: 100%;
padding: 10rem 0;
background-image: linear-gradient(
to right bottom,
rgba(0, 0, 0, 0.6),
rgba(0, 0, 0, 0.6)
),
url("../../img/renovation-tools.jpeg");
background-size: cover;
background-position: top;
background-attachment: fixed;
-webkit-clip-path: polygon(100% 0, 100% 90%, 50% 100%, 0 90%, 0 0, 50% 10%);
clip-path: polygon(100% 0, 100% 80%, 50% 100%, 0 80%, 0 0, 50% 20%);
}
& .row {
margin: 20rem 0 10rem;
}
&--icon {
font-size: 10rem;
color: $color-secondary-light;
@include respond(tab-port) {
font-size: 6rem;
}
}
&--count {
display: block;
font-size: 7rem;
color: $color-secondary-light;
margin-top: -2rem;
@include respond(tab-port) {
font-size: 5rem;
}
}
&--sub {
display: inline-block;
transform: translateY(0.8rem);
}
}
<section class="section-stats ">
<div class="section-stats--clip u-flex">
<div class="row">
<div class="col-1-of-3 u-center-text">
<i class="lni lni-apartment section-stats--icon"></i>
<span class="section-stats--count"
>2<span class="section-stats--sub">3</span>8</span
>
<h3 class="heading-tertiary heading-white">COMPLETED PROJECTS</h3>
</div>
<div class="col-1-of-3 u-center-text">
<i class="lni lni-apartment section-stats--icon"></i>
<span class="section-stats--count"
>7<span class="section-stats--sub">5</span>1</span
>
<h3 class="heading-tertiary heading-white">COMPLETED PROJECTS</h3>
</div>
<div class="col-1-of-3 u-center-text">
<i class="lni lni-apartment section-stats--icon"></i>
<span class="section-stats--count"
>7<span class="section-stats--sub">5</span>1</span
>
<h3 class="heading-tertiary heading-white">COMPLETED PROJECTS</h3>
</div>
</div>
</div>
</section>
代码笔:https://codepen.io/yongelee/pen/eVobRd
我想让背景没有白色,所以基本上把白色 space 作为下一个方块背景的颜色。但不幸的是,当我剪辑路径时,div 不会从矩形变为梯形!
我的代码(JSX):
<Wrapper>
<HeroBlock>
<h1>hi</h1>
<h4>hihi</h4>
</HeroBlock>
<IntroBlock>
<h1>heyyy</h1>
<h4>YO??</h4>
</IntroBlock>
<SkillsBlock>
<h1>Heyy</h1>
<h4>okkk</h4>
</SkillsBlock>
</Wrapper>
const Wrapper = styled.div`
display: grid;
grid-template-columns: 1fr;
`
const HeroBlock = styled.div`
background: skyblue;
height: 50vh;
-webkit-clip-path: polygon(0 0, 100% 0, 100% 90%, 0% 100%);
clip-path: polygon(0 0, 100% 0, 100% 90%, 0% 100%);
`
const IntroBlock = styled.div`
background: orange;
padding-bottom: 100px;
-webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 90%);
clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 90%);
`
const SkillsBlock = styled.div`
background: red;
-webkit-clip-path: polygon(0 0, 100% 0, 100% 90%, 0% 100%);
clip-path: polygon(0 0, 100% 0, 100% 90%, 0% 100%);
`
为此使用样式组件。
好的,这是我想出的:
h1 {
margin-top:0;
}
.container {
display: grid;
grid-template-columns: 1fr;
}
.hero_cont {
background-color:orange;
}
.hero {
padding-top:21px;
background: skyblue;
height: 50vh;
-webkit-clip-path: polygon(0 0, 100% 0, 100% 90%, 0% 100%);
clip-path: polygon(0 0, 100% 0, 100% 90%, 0% 100%);
}
.intro_cont {
background-color:red;
}
.intro {
padding-top:21px;
background: orange;
padding-bottom: 100px;
-webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 90%);
clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 90%);
}
.skills_cont {
background-color:transparent;
}
.skills {
padding-top:21px;
background: red;
-webkit-clip-path: polygon(0 0, 100% 0, 100% 90%, 0% 100%);
clip-path: polygon(0 0, 100% 0, 100% 90%, 0% 100%);
}
<div class="container">
<div class='hero_cont'>
<div class="hero">
<h1>Hey</h1>
<h4>heyy</h4>
</div>
</div>
<div class='intro_cont'>
<div class="intro">
<h1>Hii</h1>
<h4>Yoo</h4>
</div>
</div>
<div class='skills_cont'>
<div class="skills">
<h1>One</h1>
<h4>Noooo</h4>
</div>
</div>
</div>
简单地考虑一些像这样的负边距:
.container {
display: grid;
grid-template-columns: 1fr;
}
.hero {
background: skyblue;
height: 50vh;
-webkit-clip-path: polygon(0 0, 100% 0, 100% 90%, 0% 100%);
clip-path: polygon(0 0, 100% 0, 100% 90%, 0% 100%);
}
.intro {
margin-top: -40px;
background: orange;
padding-bottom: 100px;
-webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 90%);
clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 90%);
}
.skills {
margin-top: -40px;
background: red;
-webkit-clip-path: polygon(0 0, 100% 0, 100% 90%, 0% 100%);
clip-path: polygon(0 0, 100% 0, 100% 90%, 0% 100%);
}
<div class="container">
<div class="hero">
<h1>Hey</h1>
<h4>heyy</h4>
</div>
<div class="intro">
<h1>Hii</h1>
<h4>Yoo</h4>
</div>
<div class="skills">
<h1>One</h1>
<h4>Noooo</h4>
</div>
</div>
我想将剪辑路径添加到 div 中,但不限于部分。我可以剪辑 div,我可以在部分上制作线性渐变,所以剪辑路径之前的部分例如是红色,所以剪辑所在部分的顶部也是红色,底部是蓝色,bc 下一节会变蓝它单独很好的内容 :D
.section-stats {
background: linear-gradient(to bottom, rgb(247, 247, 247), rgba(0, 0, 0, 0));
position: relative;
width: 100%;
padding: 5rem 0;
// this is element which we want to clip
&--clip {
height: 100%;
width: 100%;
padding: 10rem 0;
background-image: linear-gradient(
to right bottom,
rgba(0, 0, 0, 0.6),
rgba(0, 0, 0, 0.6)
),
url("../../img/renovation-tools.jpeg");
background-size: cover;
background-position: top;
background-attachment: fixed;
-webkit-clip-path: polygon(100% 0, 100% 90%, 50% 100%, 0 90%, 0 0, 50% 10%);
clip-path: polygon(100% 0, 100% 80%, 50% 100%, 0 80%, 0 0, 50% 20%);
}
& .row {
margin: 20rem 0 10rem;
}
&--icon {
font-size: 10rem;
color: $color-secondary-light;
@include respond(tab-port) {
font-size: 6rem;
}
}
&--count {
display: block;
font-size: 7rem;
color: $color-secondary-light;
margin-top: -2rem;
@include respond(tab-port) {
font-size: 5rem;
}
}
&--sub {
display: inline-block;
transform: translateY(0.8rem);
}
}
<section class="section-stats ">
<div class="section-stats--clip u-flex">
<div class="row">
<div class="col-1-of-3 u-center-text">
<i class="lni lni-apartment section-stats--icon"></i>
<span class="section-stats--count"
>2<span class="section-stats--sub">3</span>8</span
>
<h3 class="heading-tertiary heading-white">COMPLETED PROJECTS</h3>
</div>
<div class="col-1-of-3 u-center-text">
<i class="lni lni-apartment section-stats--icon"></i>
<span class="section-stats--count"
>7<span class="section-stats--sub">5</span>1</span
>
<h3 class="heading-tertiary heading-white">COMPLETED PROJECTS</h3>
</div>
<div class="col-1-of-3 u-center-text">
<i class="lni lni-apartment section-stats--icon"></i>
<span class="section-stats--count"
>7<span class="section-stats--sub">5</span>1</span
>
<h3 class="heading-tertiary heading-white">COMPLETED PROJECTS</h3>
</div>
</div>
</div>
</section>