Question

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

这是我的代码：

＆＃13;

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

＆＃13;

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

＆＃13;

我的共享部分有问题。

Answer 1

结合使用伪元素，:before＆amp; :after，可以实现预期的布局，如下面的嵌入式代码段所示。

代码段示范：

＆＃13;

* {
  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;
}

＆＃13;

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

＆＃13;

基本属性：

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

<强>参考：

Psuedo-elements ：

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

在CSS中， :: after 会创建最后一个pseudo-element 所选元素的子元素。它通常用于添加化妆品对具有content属性的元素content ^ref。它默认是内联的。
::before (:before) ：

在CSS中， :: before 会创建第一个pseudo-element 所选元素的子元素。它通常用于添加化妆品对具有content属性的元素content ^ref。它默认是内联的。

Answer 2

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

那么，您想要模仿多少图像？这是怎么回事？

struct

.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;
}

使用CSS绘制重叠的椭圆

3 个答案: