Question

目前，我在css中遇到了一个带有clip-path属性的奇怪错误。我正在应用多边形剪辑路径在我正在为我的工作开发的着陆页上创建一个有角度的部分。问题是，每当我应用clip-path时，此父容器中具有转换的任何子元素都会变得不稳定。我打开/关闭了属性，出于某种原因，每当我删除clip-path属性时，动画再次平滑？

Click to view my jsfiddle

下面是html和css：

HTML

<header class="gs_hero">
 <div class="container-fluid">
    <div class="row">
        <section class="gs_hero_contents">
            <div class="gs_hero_callout">
                <h1>Getting Started</h1>
                <p>7 Steps To Setting Up Your Artwork</p>
                <button class="gs_lm_btn" id="gs_lm_btn">Learn More</button>
            </div>
        </section>
    </div>
 </div>
</header>

CSS

.gs_hero {
  background: url(../img/custom_journey_header.jpg) no-repeat;
  background-position: 0 60%;
  background-size: cover;
  position: relative;
  padding-bottom: 100px;
  -webkit-clip-path: polygon(0 0, 1600px 0, 1600px 70%, 0 100%);
  clip-path: polygon(0 0, 1600px 0, 1600px 70%, 0 100%);
  transition: -webkit-clip-path 0.35s, clip-path 0.35s;
}
.gs_hero:before {
  content: "";
  display: block;
  background-color: rgba(130, 29, 33, 0.75);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.gs_hero_contents {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
}
.gs_hero_contents h1 {
  font-size: 25px;
  font-weight: 800;
  margin: 0;
  text-transform: uppercase;
}
.gs_hero_contents p {
  font-size: 19px;
  margin: 8px auto;
}
.gs_hero_callout {
  color: rgba(255, 255, 255, 1);
  text-align: center;
  margin: 60px auto 0;
}
.gs_lm_btn {
  background-color: rgba(236, 54, 66, 1);
  border: none;
  border-radius: 38px;
  color: rgba(255, 255, 255, 1);
  font-size: 17px;
  font-weight: 900;
  text-transform: uppercase;
  outline: none;
  margin: 15px auto 0;
  padding: 12px;
  width: 160px;
  -webkit-appearance: none;
  -moz-appearance: none;
  -o-appearance: none;
  -webkit-transition: box-shadow 425ms ease, opacity 425ms ease, 
  transform 425ms ease;
  -moz-transition: box-shadow 425ms ease, opacity 425ms ease, transform 
  425ms ease;
  -o-transition: box-shadow 425ms ease, opacity 425ms ease, transform 
  425ms ease;
 }
 .gs_lm_btn:hover {
    box-shadow: 0 33px 35px -10px rgba(0,0,0,0.15);
    opacity: 0.8;
    transform: translateY(2px);
 }

Answer 1

由于它似乎与clip-path无法正常工作，并且由于clip-path浏览器支持不佳，因此一种解决方法可能是使用transform: skew创建倾斜/倾斜的底部

＆＃13;

/*********************************************************************
- overrides
*********************************************************************/
body {
    font-family: 'Source Sans Pro','Helvetica Neue',Helvetica,Arial,sans-serif;
}
h1,h2,h3,h4,h5,h6 {
    font-family: 'Source Sans Pro','Helvetica Neue',Helvetica,Arial,sans-serif;
}
h2 {
    margin: 0;
}
ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}
.content {
    padding: 0;
    /*min-height: 4000px;*/
}
.content-wrapper {
    background-color: rgba(255,255,255,1);
}
/*********************************************************************
- gs hero parent
*********************************************************************/
.gs_hero {
    background: url(../img/custom_journey_header.jpg) no-repeat;
    background-position: 0 60%;
    background-size: cover;
    position: relative;
    padding-bottom: 100px;
    overflow: hidden;
}
.gs_hero:before {
    content: "";
    display: block;
    background-color: rgba(130, 29, 33, 0.75);
    position: absolute;
    transform: skewY(-3deg);
    top: -50%;
    left: 0;
    width: 100%;
    height: 130%;
}
/*********************************************************************
- gs hero contents
*********************************************************************/
.gs_hero_contents {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    /*margin: 10vh auto;*/
}
.gs_hero_contents h1 {
    font-size: 25px;
    font-weight: 800;
    margin: 0;
    text-transform: uppercase;
}
.gs_hero_contents p {
    font-size: 19px;
    margin: 8px auto;
}
.gs_hero_callout {
    color: rgba(255, 255, 255, 1);
    text-align: center;
    margin: 60px auto 0;
}
.gs_lm_btn {
    background-color: rgba(236, 54, 66, 1);
    border: none;
    border-radius: 38px;
    color: rgba(255, 255, 255, 1);
    font-size: 17px;
    font-weight: 900;
    text-transform: uppercase;
    outline: none;
    margin: 15px auto 0;
    padding: 12px;
    width: 160px;
    -webkit-appearance: none;
    -moz-appearance: none;
    -o-appearance: none;
    -webkit-transition: box-shadow 425ms ease, opacity 425ms ease, transform 425ms ease;
    -moz-transition: box-shadow 425ms ease, opacity 425ms ease, transform 425ms ease;
    -o-transition: box-shadow 425ms ease, opacity 425ms ease, transform 425ms ease;
}
.gs_lm_btn:hover {
    box-shadow: 0 33px 35px -10px rgba(0,0,0,0.15);
    opacity: 0.8;
    transform: translateY(2px);
}

＆＃13;

<header class="gs_hero">
	<div class="container-fluid">
		<div class="row">
			<section class="gs_hero_contents">
				<div class="gs_hero_callout">
					<h1>Getting started</h1>
					<p>7 Steps To Setting Up Your Artwork</p>
					<button class="gs_lm_btn" id="gs_lm_btn">Learn More</button>
				</div>
			</section>
		</div>
	</div>
</header>

＆＃13;

将clip-path应用于父级会导致子元素的动态不稳定

1 个答案: