夹角盒 [英] Box with clipped corners

问题描述

我需要一个带有所有弯角的盒子.这是我到目前为止的内容:

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>

很遗憾，不支持Edge ，并且我不能使用盒形阴影.还有另一种方法可以做到这一点吗?

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

推荐答案

我们可以使用隐藏的溢出和旋转的伪元素来执行某些操作吗?

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>

这篇关于夹角盒的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！