使用 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

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

.shared {
  margin-left: -30px;
}

.oval-title {
  text-transform: uppercase;
  text-align: center;
  margin: 0px;
}

<div class="oval">
  <p class="oval-title">bcr</p>
</div>
<div class="oval shared">
  <p class="oval-title">bod</p>
</div>

Answer 2

结合使用伪元素、: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>

基本属性：

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

参考：

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.
::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.
::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.

Answer 3

嗯，你想模拟多少图像？这个开始怎么样？

.oval {
  width: 100px;
  display: inline-block;
  height: 50px;
  border: 1px solid #573;
  border-radius: 100px / 50px;
  text-align:center;
  overflow:hidden;
  position:relative;
  font:16px/20px 'Arial', sans-serif;
}
.oval.special {
  background:linear-gradient(to right, rgba(255,255,255,0) 30%, rgba(128,128,128,.2));
  color:#573;
}
.oval:not(:first-child) {
  margin-left: -30px;
}
.oval::before {
  position:absolute;
  display:block;
  border-radius: 50px 0 / 25px 0;
  top:0; left:70px; width:100px; height:25px;
  background:#573 linear-gradient(to right, #463, #683 30%); color: white;
  font-size:.625em; line-height:31px;
  content:'C';
  text-align:center; text-indent:-70px;
}
.oval::after {
  position:absolute;
  display:block;
  border-radius: 0 50px / 0 25px;
  bottom:0; left:70px; width:100px; height:25px;
  background:red linear-gradient(to right, #722, #A23 30%); color: white;
  font-size:.625em; line-height:19px;
  content:'R';
  text-align:center; text-indent:-70px;
}

<div class="oval special">BCR</div><div class="oval special">BOD</div><div class="oval special">ASR</div><div class="oval special">EMV</div><div class="oval">STE</div><div class="oval">DVR</div><div class="oval">PVR</div>

使用 CSS 绘制重叠的椭圆

Draw overlapped ovals using CSS

html

css

css-shapes