如何制作具有 4 个斜边的形状

Question

我正在尝试制作一个带有四个负弯曲角的形状，并且我尝试了径向渐变。但是，只有一个角被应用，我不明白为什么。 https://jsfiddle.net/xiej/1Lqysaho/1/

#shape2 {
  width: 120px;
  height: 120px;
  position: absolute;
  top: 400px;
  right: 400px;
  background-image:
    radial-gradient(circle at 0px 0px, #FFF 0px, #FFF 60px, #F00 60px), 
    radial-gradient(circle at 0px 120px, #FFF 0px, #FFF 60px, #F00 60px), 
    radial-gradient(circle at 120px 0px, #FFF 0px, #FFF 60px, #F00 60px), 
    radial-gradient(circle at 120px 120px, #FFF 0px, #FFF 60px, #F00 60px);
}

Answer 1

每个径向渐变的最后一个色标覆盖了正方形的其余部分，想象一下它们相互叠加。我不确定我的修复是否是获得您正在寻找的形状的最佳方法，但我认为这至少会形成形状！我缩短了停止点以在径向渐变覆盖其他三个角中的任何一个之前结束径向渐变。

https://jsfiddle.net/1Lqysaho/2/

background: #F00;
background-image: 
   radial-gradient(circle at 0px 0px, #FFF 60px, #f00 1px, transparent 1px),
   radial-gradient(circle at 0px 120px, #FFF 60px,#f00 1px, transparent 1px),
   radial-gradient(circle at 120px 0px, #FFF 60px,#f00 1px, transparent 1px),
   radial-gradient(circle at 120px 120px, #FFF 60px,#f00 1px, transparent 1px);

Answer 2

div.round {
background: 
-webkit-radial-gradient(0 100%, circle, rgba(204,0,0,0) 14px, #c00 15px), 
-webkit-radial-gradient(100% 100%, circle, rgba(204,0,0,0) 14px, #c00 15px),
-webkit-radial-gradient(100% 0, circle, rgba(204,0,0,0) 14px, #c00 15px), 
-webkit-radial-gradient(0 0, circle, rgba(204,0,0,0) 14px, #c00 15px);  
 } 
div, div.round { 
background-position: bottom left, bottom right, top right, top left;  c
-moz-background-size: 50% 50%;
-webkit-background-size: 50% 50%;  
background-repeat: no-repeat; 
 }
div { 
width: 130px;
height:100px; 
margin:15px auto; 
padding:13px 15px; 
}

<div class="round"></div>

如何制作具有 4 个斜边的形状

How do make a shape with 4 beveled edges

css

radial-gradients