Overflow:hidden making hidden the pseudo element itself

Question

I am trying to achieve the below layout using pseudo-element for the upper curve but there is a problem in doing this

I have tried this

ul li{
  width: 300px;
  min-height: 400px;
  border: 5px solid #bcbcbc;
  padding: 5px;
  list-style: none;
}
.upper{
  height: 200px;
}
.bottom{
  background: #000;
  height: 200px;
  position: relative;
  overflow: hidden;
}
.bottom:before
{
 content: '';
 position: absolute;
 top:-50px;
 border-bottom:25px solid #000;
 content: '';
    position: absolute;
    top: -50px;
    border-bottom: 25px solid #000;
    border-top: 25px solid transparent;
    width: 100%;
    border-left: 150px solid transparent;
    border-right: 150px solid #000;
}

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <ul>
   <li>
     <div class="upper"></div>
      <div class="bottom"></div>
   </li>
  </ul>
</body>
</html>

but when I put overflow hidden for .bottom class it's hiding the pseudo-element itself. please point where I am doing wrong

thanks for the answers I got how to do and I did that, but still I didn't get the reason the pseudo-element itself hiding. — Mohammed Rabiulla RABI, Jul 24 '19 at 06:53
because you placed the pseudo element outside its parent element using negative top value ... to fix your code remove `width:100%` from the pseudo element and `overflow:hidden` from parent element — Temani Afif, Jul 24 '19 at 08:44

adel · Accepted Answer · 2019-07-24T06:49:54.693

5

you can do it without pseudo element using skew() method:

ul li{
  width: 300px;
  height:400px ;
  border: 5px solid #bcbcbc;
  padding: 5px;
  list-style: none;
}
.parent{
 overflow:hidden;
     position:relative;
     height:100%;
     width:100;
     }

.bottom{
  background: #000;
  height: 400px;
  width:100%;
  position:absolute;
  bottom:-200px;
  left:0;
  transform:skewY(-15deg)
}

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <ul>
   <li>
   <div class="parent">
      <div class="bottom"></div>
      </div>
   </li>
  </ul>
</body>
</html>

edited Jul 24 '19 at 06:49

answered Jul 24 '19 at 06:41

adel

3,436
1
7
20

but there is no space between border and inner divs – Mohammed Rabiulla RABI Jul 24 '19 at 06:45
now its working like you want! – adel Jul 24 '19 at 06:50

score 0 · Answer 2 · answered Jul 24 '19 at 06:45

You simply need to change the width of bottom:before pseudo element to auto instead of 100% and remove overflow:hidden property from bottom class.

Check the snippet below

ul li{
  width: 300px;
  min-height: 400px;
  border: 5px solid #bcbcbc;
  padding: 5px;
  list-style: none;
}
.upper{
  height: 200px;
}
.bottom{
  background: #000;
  height: 200px;
  position: relative;
}
.bottom:before
{
 content: '';
 position: absolute;
 top:-50px;
 border-bottom:25px solid #000;
 content: '';
    position: absolute;
    top: -50px;
    border-bottom: 25px solid #000;
    border-top: 25px solid transparent;
    width: auto;
    border-left: 150px solid transparent;
    border-right: 150px solid #000;
}

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <ul>
   <li>
     <div class="upper"></div>
      <div class="bottom"></div>
   </li>
  </ul>
</body>
</html>

However, the correct way is to use clip-path as demonstrated here

score 0 · Answer 3 · answered Jul 24 '19 at 06:46

0

add this css in your bootom class

.bottom{
  background: #000;
  height: 200px;
  position: relative;
  overflow: hidden;
  clip-path: polygon(0 38%, 100% 0%, 100% 100%, 0% 100%);
}

answered Jul 24 '19 at 06:46

SHUBHAM SINGH

371
3
11

check working demo here https://jsfiddle.net/bt2e1nky/ – SHUBHAM SINGH Jul 24 '19 at 06:46
nice didn't know this trick, do you now perhaps if you can make this work for Edge & IE? – Nick Van Loocke Jul 24 '19 at 07:22
Note `clip-path` does not work at all in microsoft browsers and may have issues in other browsers: https://caniuse.com/#feat=css-clip-path – Jon P Jul 24 '19 at 07:30

Overflow:hidden making hidden the pseudo element itself

3 Answers3