CSS background outside of border-radius with :before and z-index

Asked Nov 18 '18 at 11:48

Active Nov 18 '18 at 11:54

Viewed 413 times

I am trying to set up a background color outside of border-radius with :before and z-index.

The problem is that the border-radius css start should be a circle and behind on the right side should be light green to connect to the html element 2 but it does not work.

Any suggestion how to make it work?

td {
    width:40px;
    height:40px;
    text-align: center;
    background-clip: padding-box;
    -webkit-background-clip: padding-box;
}

.middle {
  background-color: #b2edd6;
}

td.start {
    border-radius: 50%;
    background-color: #00AA6C;
    color: white;
    z-index: 1;
    position: relative;
}

td.start:before {
  content: "";
  background-color: #b2edd6;
  width: 50%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 50%;
  z-index: -1;
}

<table style='table-layout:fixed;border-collapse: collapse;'>
  
  <tbody>
    <tr>
      <td class='start'>1</td>
      <td class='middle'>2</td>
      <td>3</td>
    </tr>
  </tbody>
</table>

asked Nov 18 '18 at 11:48

Petr

1,853
2
25
49

remove z-index from the td element – Temani Afif Nov 18 '18 at 11:51
@TemaniAfif this will remove make the background outside of radius white.. I need the top&bottom right corners to be light green – Petr Nov 18 '18 at 11:59
can you share a screenshot about how you want it to look? – Temani Afif Nov 18 '18 at 12:02
not like this: https://jsfiddle.net/apLhn5sj/ ? – Temani Afif Nov 18 '18 at 12:04
@TemaniAfif yes this is what I need... thanks! I think I removed it from wrong element – Petr Nov 18 '18 at 12:10

CSS background outside of border-radius with :before and z-index

0 Answers0