使用CSS绘制重叠的椭圆

Question

我想设计一个与下图相似的形状:

这是我的代码:

.oval {
  width: 100px;
  display: inline-block;
  height: 50px;
  border: 1px solid red;
  border-radius: 100px / 50px;
  margin-left: -30px;
}

<div class="oval">aaa</div>

我有共享部分的问题.

Answer 1

使用两者的组合伪元素,:before&:after中,预期布局可以实现的,如在下面的嵌入代码段证明.

代码片段演示:

* {
  box-sizing: border-box;
  font-family: arial;
}

.oval:not(:first-child) {
  margin-left: -30px;
}

.oval {
  width: 100px;
  display: inline-block;
  height: 50px;
  border: 1px solid red;
  border-radius: 100px / 50px;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.oval:before,
.oval:after {
  height: 20px;
  width: 25px;
  display: inline-block;
  position: absolute;
  right: 0;
  font-size: 10px;
  color: white;
}

.oval:before {
  content: "C";
  border-bottom-left-radius: 100%;
  border-bottom-right-radius: 0px;
  background: red;
  bottom: 5px;
  line-height: 15px;
}

.oval:after {
  content: "R";
  border-top-left-radius: 100%;
  border-top-right-radius: 0px;
  background: green;
  top: 5px;
  line-height: 25px;
}

/* Nested anchor tags */

.oval.nested-children:before,
.oval.nested-children:after {
  display: none;
}

br + .oval.nested-children {
  margin-left: 0px;
}

.oval a {
  height: 20px;
  width: 25px;
  display: inline-block;
  position: absolute;
  right: 0;
  font-size: 10px;
  color: white;
  z-index: 1;
}

.oval a:first-of-type {
  border-bottom-left-radius: 100%;
  border-bottom-right-radius: 0px;
  background: red;
  bottom: 5px;
  line-height: 15px;
}

.oval a:last-of-type {
  border-top-left-radius: 100%;
  border-top-right-radius: 0px;
  background: green;
  top: 5px;
  line-height: 25px;
}

<div class="oval">aaa</div>
<div class="oval">aaa</div>
<div class="oval">aaa</div>
<div class="oval">aaa</div>
<div class="oval">aaa</div>
<br><br>
<div class="oval nested-children">aaa<a href="#">C</a><a href="#">R</a></div>
<div class="oval nested-children">aaa<a href="#">C</a><a href="#">R</a></div>
<div class="oval nested-children">aaa<a href="#">C</a><a href="#">R</a></div>
<div class="oval nested-children">aaa<a href="#">C</a><a href="#">R</a></div>
<div class="oval nested-children">aaa<a href="#">C</a><a href="#">R</a></div>

基本属性:

1. overflow: hidden在包含元素(.oval)上声明
2. position: relative在包含元素(.oval)上声明
3. position: absolute在伪元素上声明
4. border-radius在相关伪元素上声明的适用属性

参考:

1. Psuedo元素:
   

   CSS 伪元素是添加到选择器的关键字,它允许您设置所选元素的特定部分的样式.例如, ::first-line可用于更改段落第一行的字体.

2. ::之后(:之后):
   

   在CSS中,:: after创建一个伪元素,它是所选元素的最后一个子元素.它通常用于将化妆品content^引用添加 到具有content属性的元素.它默认为内联.

3. ::之前(:之前):
   

   在CSS中,:: before创建一个伪元素,它是所选元素的第一个子元素.它通常用于将化妆品content^引用添加 到具有content属性的元素.它默认为内联.