0

I need a box with all clipped corners. Here's what I have so far:

body {
  height: 200px;
  background: -webkit-linear-gradient(left, rgba(255, 0, 0, 0), rgba(255, 0, 0, 1));
  background: -o-linear-gradient(right, rgba(255, 0, 0, 0), rgba(255, 0, 0, 1));
  background: -moz-linear-gradient(right, rgba(255, 0, 0, 0), rgba(255, 0, 0, 1));
  background: linear-gradient(to right, rgba(255, 0, 0, 0), rgba(255, 0, 0, 1));
}

#block {
  width: 330px;
  height: 200px;
  margin-left: 20%;
  background-color: #222;
  -webkit-clip-path: polygon(4% 0, 96% 0, 100% 9%, 100% 90%, 96% 100%, 4% 100%, 0 90%, 0 10%);
  clip-path: polygon(4% 0, 96% 0, 100% 9%, 100% 90%, 96% 100%, 4% 100%, 0 90%, 0 10%)
}
<div id="block"></div>

Unfortunately there is no Edge support and I can't use box-shadow. Is there another way to accomplish this?

hungerstar
  • 21,206
  • 6
  • 50
  • 59
ExrowGe
  • 47
  • 10
  • What about using [`border-radius`](https://developer.mozilla.org/en-US/docs/Web/CSS/border-radius)? Not as much control, but will clip. – zero298 May 16 '17 at 21:47

1 Answers1

3

Could we do something using overflow hidden and a rotated pseudo element? 

.box{
  width:100px;
  height:100px;
  position:relative;
  overflow:hidden;
 }
.box:after{
  content: '';
  width:120px;
  height:120px;
  position:absolute;
  background:#465;
  left:50%;
  top:50%;
  transform:translateX(-50%) translateY(-50%) rotateZ(45deg);
}
<div class="box"></div>
Sean_Codes
  • 131
  • 8