两个重叠的椭圆形状 - 可见的文物

Question

我有一个带圆角的方形div。在这个div里面，我需要做出这样的形状：

我想用纯css做，但有两个问题：

1. 小1px绿色文物我无法摆脱（你可以在底部和右侧看到它们）

2. 我需要#login_form周围的1px红色边框也会出现在我的椭圆形状上方。

也许有更好的方法来削减椭圆形。

Here is a jsfiddle以下内容：

#login_form {
  margin-left: auto;
  margin-right: auto;
  position: relative;
  width: 200px;
  height: 200px;
  background: red;
  border: 1px solid black;
  border-radius: 10px;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
}
#white_ovale {
  position: absolute;
  right: -10px;
  bottom: -10px;
  width: 125px;
  height: 80px;
  background: white;
  -webkit-border-radius: 225px 0px 7px 0px / 150px 0px 7px 0px;
  -moz-border-radius: 225px 0px 7px 0px / 150px 0px 7px 0px;
  border-radius: 225px 0px 7px 0px / 150px 0px 7px 0px;
}
#green_ovale {
  position: absolute;
  right: -21px;
  bottom: -21px;
  width: 139px;
  height: 75px;
  border: 0px;
  background: #72B038;
  -webkit-border-radius: 225px 20px 7px 0px / 130px 0px 7px 0px;
  -moz-border-radius: 225px 20px 7px 0px / 130px 0px 7px 0px;
  border-radius: 225px 20px 7px 0px / 130px 0px 7px 0px;
  -webkit-box-shadow: inset -10px -10px 0px 10px white;
  -moz-box-shadow: inset -10px -10px 0px 10px white;
  box-shadow: inset -10px -10px 0px 10px white;
}

<div id="login_form">
  <div id="white_ovale"></div>
  <div id="green_ovale"></div>
</div>

Answer 1

1. 您需要overflow: hidden
2. 你需要一个第三个内部div来添加边框（想想一个独立的边框，叠加我的顶部）
顺便说一下：不要id翻身。使用类。仅在需要时使用id。并尝试不是巢id 根据经验，我只使用class用于CSS，id仅用于JS

http://jsfiddle.net/Lt4x3ufg/1/

＆＃13;
＆＃13;
.login_form {
    margin-left:auto;
    margin-right:auto;
    
    position: relative;
    width: 200px;
    height: 200px;
    background: red;
    border:1px solid red;
    border-radius: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    overflow: hidden;
}
.login_form .border {
    position: absolute;
    top: -1px;
    right: -1px;
    bottom: -1px;
    left: -1px;
    border: 1px solid red;
    border-radius: 10px;
}
.login_form .white_ovale {
	position: absolute;
	right: -10px;
	bottom: -10px;
    width: 125px;
    height: 80px;
    background: white;
    -webkit-border-radius: 
               225px 0px 7px 0px / 150px 0px 7px 0px; 
    -moz-border-radius:
               225px 0px 7px 0px / 150px 0px 7px 0px; 
    border-radius:
               225px 0px 7px 0px / 150px 0px 7px 0px; 
}

.login_form .green_ovale {
	position: absolute;
	right:  -21px;
	bottom: -21px;
    width:  139px;
    height: 75px;
    border: 0px;
    background: #72B038;

    -webkit-border-radius: 225px 20px 7px 0px / 130px 0px 7px 0px; 
       -moz-border-radius: 225px 20px 7px 0px / 130px 0px 7px 0px; 
            border-radius: 225px 20px 7px 0px / 130px 0px 7px 0px; 

    -webkit-box-shadow: inset -10px -10px 0px 10px white;
	   -moz-box-shadow: inset -10px -10px 0px 10px white;
	        box-shadow: inset -10px -10px 0px 10px white;
}
＆＃13;
<div class="login_form">
    <div class="white_ovale"></div>
    <div class="green_ovale"></div>
    <div class="border"></div>
</div>
＆＃13;
＆＃13;
＆＃13;

Answer 2

单元素解决方案

不需要额外的标记。我们可以创建：

• div中的两个形状::before和::after

• 包含div本身的红色边框

使用overflow: hidden

切断多余的背景

Nice Advantage：因为IE 8不支持border-radius属性，并且会渲染一个丑陋的方块，我们可以使用双冒号（::）来表示伪元素。 IE 8 does not recognise this syntax并将仅呈现红色框。 This is the modern syntax and valid CSS

注意：要让子元素与绿色形状重叠，应该给出position: relative和z-index: 1

浏览器兼容性： Due to the border-radius property, IE 9 +。您不太可能需要border-radius属性的浏览器前缀。

完整示例

我尽可能地压缩了CSS。

＆＃13;

＆＃13;

.login_form {
  margin: auto;
  position: relative;
  width: 200px;
  height: 200px;
  background: red;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid red;
}
.login_form::before,
.login_form::after {
  content: '';
  display: block;
  position: absolute;
  right: -10px;
  bottom: -10px;
  width: 125px;
  height: 80px;
  background: white;
  border-radius: 225px 0px 7px 0px / 150px 0px 7px 0px;
}
.login_form::after {
  right: -31px;
  bottom: -21px;
  width: 149px;
  height: 75px;
  background: #72B038;
  border-radius: 225px 20px 7px 0px / 130px 0px 7px 0px; 
}

＆＃13;

<div class="login_form"></div>

＆＃13;

＆＃13;

＆＃13;