html - 使用 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-elements :
   

   A CSS pseudo-element is a keyword added to a selector that lets you style a specific part of the selected element(s). For example, ::first-line can be used to change the font of the first line of a paragraph.

2. ::after (:after) :
   

   In CSS, ::after creates a pseudo-element that is the last child of the selected element. It is often used to add cosmetic content^ref to an element with the content property. It is inline by default.

3. ::before (:before) :
   

   In CSS, ::before creates a pseudo-element that is the first child of the selected element. It is often used to add cosmetic content^ref to an element with the content property. It is inline by default.