Css Square Bangles Shape Div

时间:2017-08-13 11:42:21

标签: html css css3

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

像这样

enter image description here

2 个答案:

答案 0 :(得分: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>

答案 1 :(得分:0)

我不确定,这是你想要的,但你尝试过剪辑路径吗?你可以从内部和角落切割(使用路径或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%);