边框弯曲的css - 带有弯曲端的圆

Posted 2023-03-04

【中文标题】边框弯曲的css - 带有弯曲端的圆

【英文标题】：border curved css - circle with curved end

【发布时间】：2018-10-28 08:59:33

【问题描述】：

我正在建立一个网站，但我很难在 CSS 中做一个细节

我需要制作一个带有弯曲末端的圆形边框，为了让您更好地理解，我将展示照片并发布我的代码

我需要什么（Photoshop）

我想要一个 CSS 解决方案，但我做不到。

这是我实际拥有的：

.bottom-bar 
  background: #29a7e8;
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 50px;
  text-align: center;


.circle 
  display: inline-block;
  position: relative;
  top: -10px;
  border-radius: 100%;
  background: #29a7e8;
  width: 60px;
  height: 60px;
  margin: 0 1rem;

<div class="bottom-bar">
      <div class="circle"></div>
      <div class="circle"></div>
      <div class="circle"></div>
    </div>

【问题讨论】：

@wazz 展示他所有照片的目的是什么？ :) 您只需突出显示不需要的内容，我们已经有代码可以看到最后一个的输出，所以不需要显示......我们需要关注代码而不是图片

然后删除它们。我不在乎。

@wazz 我已经做了，但是你回滚了我的编辑..

只是时机不对，我认为我的编辑有问题，因为我只是放在那里的图像突然没有了，所以我重做了。

【参考方案1】：

您可以使用 SVG 作为背景：

.bottom-bar 
  background: #29a7e8;
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 50px;
  text-align: center;


.circle 
  display: inline-block;
  position: relative;
  top: -28px;
  border-radius: 100%;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='10 10 45 15'  width='64' height='64' fill='%2329a7e8'><path d='M12 24 L52 24 L52 16 C40 16 42 10 32 10 C20 10 22 16 12 16 Z' /></svg>") 0 0/100% 100% no-repeat;
  width: 60px;
  height: 60px;
  margin: 0 1rem;

<div class="bottom-bar">
  <div class="circle"></div>
  <div class="circle"></div>
  <div class="circle"></div>
</div>


<svg xmlns='http://www.w3.org/2000/svg'
  viewBox='10 10 45 15'
  width='64' height='64'
  fill='#29a7e8'>
  <path d='M12 24 L52 24 L52 16 C40 16 42 10 32 10 C20 10 22 16 12 16 Z' />
</svg>

对于纯 CSS 解决方案，您可以考虑结合径向渐变来创建曲线：

.bottom-bar 
  background: #29a7e8;
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 50px;
  text-align: center;


.circle 
  display: inline-block;
  position: relative;
  top: -30px;
  background:
  radial-gradient(circle at top right,transparent 50%,#29a7e8 51%)100% 21px/12px 10px no-repeat,
  radial-gradient(circle at top left,transparent 50%,#29a7e8 51%)0 21px/12px 10px no-repeat,
  radial-gradient(circle at center,#29a7e8 55%, transparent 56%);
  width: 60px;
  height: 60px;
  margin: 0 1rem;

<div class="bottom-bar">
  <div class="circle"></div>
  <div class="circle"></div>
  <div class="circle"></div>
</div>

【参考方案2】：

一般来说，有多种方法可以创建这种形状，从简单到复杂：

用radial-gradient添加2个伪元素。

最简单且得到良好支持的解决方案。可能是我会使用的那个。

使用mask-image 添加2个伪元素（与上面相同，但支持更差）。

在代码方面与预览版非常相似，但带有really bad support（需要浏览器前缀才能支持它）。

如果您想检查它们的相似程度，请查看另一个类似的问题：CSS "inverse border-radius" outside element's bounding box to create a mobile phone notch design

使用border-radius、box-shadow 和background: transparent 添加2 个伪元素。

需要更多代码，但看起来更流畅，至少在Chrome Version 78.0.3904.108 上，尽管差异很小。在任何情况下，您可以制作的形状都不能像以前的替代品那样复杂，特别是如果您想使用椭圆而不是圆形，就像您的情况一样。

使用 SVG。

我认为 SVG 解决方案在这里不值得，但对于更复杂的形状或动画/过渡形状来说，它会是一个不错的选择。无论如何，Temani Afif 已经添加了使用 SVG 的解决方案。

需要记住的是，因为它看起来像一个导航栏，所以每个按钮的可悬停/可点击区域应尽可能匹配用户实际看到的内容，Temani Afif 的解决方案并非如此.

这就是使用radial-gradient 的样子：

body 
  margin: 0;
  font-family: monospace;
  background: #DDD;


.bar 
  background: white;
  position: fixed;
  bottom: 0;
  width: 100%;
  height: 60px;
  text-align: center;


.circle 
  position: relative;
  top: -10px;
  border-radius: 100%;
  background: white;
  width: 60px;
  height: 60px;
  margin: 0 16px;
  cursor: pointer;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  font-size: 24px;
  font-weight: bold;
  color: black;
  transition: box-shadow ease-in 150ms;
  background: white;
  border: 0;
  outline: none;


.circle:hover 
  box-shadow: 0 16px 16px 0 rgba(0, 0, 0, .125);


.circle:active 
  box-shadow: 0 8px 8px 0 rgba(0, 0, 0, .125);


.circle::before,
.circle::after 
  content: "";
  position: absolute;
  top: 4px;
  width: 32px;
  height: 6px;
  background: white;
  z-index: 1;


.circle::before 
  left: -18px;
  background: radial-gradient(ellipse at 0% -25%, transparent 0, transparent 70%, white 70%, white 100%);


.circle::after 
  right: -18px;
  background: radial-gradient(ellipse at 100% -25%, transparent 0, transparent 70%, white 70%, white 100%);

<nav class="bar">
  <button class="circle">?</button>
  <button class="circle">?</button>
  <button class="circle">?</button>
</nav>

如果您想查看类似的问题和所有的替代方案，请查看：CSS "inverse border-radius" outside element's bounding box to create a mobile phone notch design