Css Square Bangles Shape Div

Question

任何人都可以帮我把这个div变成方形手镯形状

像这样

Answer 1

您可以使用伪元素将两个形状叠加在彼此之上，如下所示：

.x {
position: relative;
left: 50px;
top: 50px;
  width: 260px;
  height: 240px;
  border-top-left-radius: 15px 130px;
  border-top-right-radius: 15px 130px;
  border-bottom-left-radius: 15px 130px;
  border-bottom-right-radius: 15px 130px;
  border: 30px solid #af8;
}
.x:after {
content: '';
position: absolute;
left: -20px;
top: -40px;
width: 240px;
height: 260px;
  border-top-left-radius: 130px 15px;
  border-top-right-radius: 130px 15px;
  border-bottom-left-radius: 130px 15px;
  border-bottom-right-radius: 130px 15px;
  border: 30px solid #af8;
}

<div class="x"></div>

如果你想在内部形状上也有类似的圆角，你可以在它上面添加另一个元素和一个额外的伪元素：

.x {
  position: relative;
  left: 50px;
  top: 50px;
  width: 260px;
  height: 240px;
  border-top-left-radius: 15px 130px;
  border-top-right-radius: 15px 130px;
  border-bottom-left-radius: 15px 130px;
  border-bottom-right-radius: 15px 130px;
  border: 30px solid #af8;
}

.x:after {
  content: '';
  position: absolute;
  left: -20px;
  top: -40px;
  width: 240px;
  height: 260px;
  border-top-left-radius: 130px 15px;
  border-top-right-radius: 130px 15px;
  border-bottom-left-radius: 130px 15px;
  border-bottom-right-radius: 130px 15px;
  border: 30px solid #af8;
}

.y {
  position: absolute;
  z-index: 10;
  left: 5px;
  top: -10px;
  width: 250px;
  height: 260px;
  border-top-left-radius: 130px 10px;
  border-top-right-radius: 130px 10px;
  border-bottom-left-radius: 130px 10px;
  border-bottom-right-radius: 130px 10px;  
  border: none;
  background: #eee;
}
.y:after {
  content: '';
  position: absolute;
  z-index: 10;
  left: -5px;
  top: 5px;
  width: 260px;
  height: 250px;
  border-top-left-radius: 10px 130px;
  border-top-right-radius: 10px 130px;
  border-bottom-left-radius: 10px 130px;
  border-bottom-right-radius: 10px 130px;  
  border: none;
  background: #eee;
}

<div class="x">
  <div class="y"></div>
</div>

Answer 2

我不确定，这是你想要的，但你尝试过剪辑路径吗？你可以从内部和角落切割（使用路径或svg）。这样的事情：

-webkit-clip-path: polygon(25% 75%, 25% 25%, 75% 25%, 75% 75%, 85% 100%, 100% 85%, 100% 15%, 85% 0%, 15% 0%, 0% 15%, 0% 85%, 15% 100%, 85% 100%, 75% 75%);
clip-path: polygon(25% 75%, 25% 25%, 75% 25%, 75% 75%, 85% 100%, 100% 85%, 100% 15%, 85% 0%, 15% 0%, 0% 15%, 0% 85%, 15% 100%, 85% 100%, 75% 75%);