Дочерний элемент исчезает после добавления пути клипа - PullRequest
Новая
       20

Дочерний элемент исчезает после добавления пути клипа

1 голос
/ 05 мая 2019

Для дизайн-проекта, который я делаю, я хочу добавить путь к клипу для моего вторичного контента. Однако после добавления кода пути клипа некоторые из дочерних элементов или элементов исчезают в моем содержимом .about. Я пытался использовать position:absolute или z-index, но с содержимым моего .about ничего не происходит. Заранее спасибо. 

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    font-size: 10px;
}

a {
    text-decoration: none;
}

.body {
    height: 100vh;
    background: linear-gradient( #001f3f, transparent 80% ),
                    linear-gradient(0deg, #fff, transparent) 
                    ,url(img/bgmain.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    
}

.firstlayout {
    height: 100vh;
}

.overlay{
	background-color: rgba(0,0,0,.95);
	position: fixed;
	right: 0;
	left: 0;
	top: 0;
	bottom: 0;
	transition: opacity 650ms;
	transform: scale(0);
	opacity: 0;
    display: none;
}

/* Hamburger Menu */

.menu-toggle {
    position: fixed;
    top: 2.5rem;
    right: 2.5rem;
    color: #eeeeee;
    font-size: 3rem;
    cursor: pointer;
    z-index: 1000;
    display: none;
}

/* End of Hamburger Menu */

/* Navagation Link */
header {
    font-family: "Raleway", sans-serif;
    position: relative;
    width: 100%;
    height: 10rem;
    z-index: 2;
}

nav {
    /* padding-top: 5rem; */
    display: flex;
    height: 100%;
    justify-content: space-between;
    align-items: center;
    text-transform: uppercase;
    font-size: 1.4rem;
}

nav img {
    height: 7rem;
    margin: 0 0 0 12rem;
}

nav ul {
    display: flex;
}

nav ul li {
    list-style: none;
}

nav ul li a {
    font-weight: 900;
    font-size: 1.4rem;
    padding: 1rem 0;
    margin: 0 1rem;
    position: relative;
    color: #eee;
}

.menu {
    margin: 0 12rem 0 0;
}

.menu a {
    font-size: 1rem;
    margin: 0 .1rem;
    outline: none;
}

.menu a:last-child{
    margin-right: 0;
}

nav ul li a::before,
nav ul li a::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 2px;
    background-color: #f4511e;
    left: 0;
    transform: scaleX(0);
	transition: all .5s;
}

nav ul li a::before{
	top: 0;
	transform-origin: left;
}

nav ul li a::after{
	bottom: 0;
	transform-origin: right;
}

nav ul li a:hover::before,
nav ul li a:hover::after{
	transform: scaleX(1);
}

.btn {
        border: none;
        border-radius: 30px;
        background-color: #f4511e;
        color: #fff;
        font-size: 1rem;
        font-weight: bold;
        text-align: center;
        padding: 9px;
        width: 70px;
        text-transform: uppercase;
}

.btninfo{
    padding: 9px 19px;
}
/* End of Navagation Menu */

/* Content of the Website *****************/

.content {
    height: 100vh;
    text-align: center;
}

.possible {
    color: #fff;
    letter-spacing: 10px;
    text-transform: uppercase;
    padding-top: 8rem;
    font-family: "Coiny", sans-serif;
    font-size: 3.6rem;
}
.possible2 {
    color: #fff;
    padding-top: 4rem;
    font-family: "Montserrat", sans-serif;
    font-size: 2.5rem;
}

.arrow {
    width: 50px;
    padding-top: 10rem;
}

/* About 2nd layer ******************/

.about {
    position: absolute;
    height: 100vh;
    background-color: firebrick;
    clip-path: polygon(70% 51%, 100% 0, 100% 100%, 0 100%, 0 79%);
    width: 100%;
    z-index: -1000;
}

.jury {
    position: relative;
    font-family: "Coiny", sans-serif;
    text-align: center;
    font-size: 4rem;
    padding-top: 2em;
}

.jury span {
    color: #f4511e;
}

.rectangle {
    border: 1px solid firebrick;
    fill: firebrick;
}
<body>
    <div class="body">
        <div class="firstlayout">
        <header>
            <div class="menu-toggle" id="hamburger">
                    <i class="fas fa-bars"></i>
            </div>
            <div class="overlay"></div>
            <nav>
                <img src="img/logo2.png" alt="Logo" class="logo">
                <ul>
                    <li><a href="#">Home</a></li>
                    <li><a href="#">Services</a></li>
                    <li><a href="#">About</a></li>
                    <li><a href="#">Contact</a></li>
                </ul>
                <div class="menu">
                    <a href="#" class="btn">Contact</a>
                    <a href="#" class="btn btninfo">Info</a>
                </div>
            </nav>
        </header>
        <div class="content">
                <h1 class="possible">Everything is Possible</h1>
                <h2 class="possible2">"as long as you put your mind to it and put the work and time into it"</h2>
                <a href="#about"><img class="arrow" src="img/arrow.svg" alt="Down arrow"></a>
            </div>
        </div>
    </div>
    <div id="about" class="about">
        <h1 class="jury"><span>Hi!</span>, I'm Jury Gregorio</h1>
        <div class="rectangle"><br></div>
    </div>
    
</body>

1 Ответ

1 голос
/ 05 мая 2019

Это логический результат clip-path, поскольку он обрезает элемент и его содержимое.

В этом случае clip-path можно заменить простым фоном: 

.clip-path {
  clip-path: polygon(70% 51%, 100% 0, 100% 100%, 0 100%, 0 79%);
  background: red;
}
.background {
  background:
    linear-gradient(to bottom right,transparent 49.8%,red 50%) right       /59% 100%,
    linear-gradient(to bottom right,transparent 49.8%,red 50%) bottom right/153% 61%;
  background-repeat:no-repeat;
}

.box { 
  padding: 10px;
  margin:10px;
  font-size:25px;
  border:1px solid;
}
<div class="clip-path box">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec suscipit, ex a egestas vulputate, sapien arcu efficitur risus, eget volutpat lacus nibh sit amet tellus. Maecenas a risus sed tellus laoreet vulputate. Ut sit amet placerat risus. Etiam diam
  eros, ultrices in luctus ac, malesuada nec lectus.
</div>
<div class="background box">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec suscipit, ex a egestas vulputate, sapien arcu efficitur risus, eget volutpat lacus nibh sit amet tellus. Maecenas a risus sed tellus laoreet vulputate. Ut sit amet placerat risus. Etiam diam
  eros, ultrices in luctus ac, malesuada nec lectus.
</div>
...