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个斜边的形状

2 个答案: