边框弯曲 css - 带有弯曲末端的圆 [英] border curved css - circle with curved end

问题描述

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

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

我需要什么(Photoshop)

我想要一个 CSS 解决方案，但我不能.

这是我实际拥有的:

.bottom-bar {背景:#29a7e8；位置:绝对；底部:0；宽度:100%；高度:50px；文本对齐:居中；}.圆圈 {显示:内联块；位置:相对；顶部:-10px；边界半径:100%；背景:#29a7e8；宽度:60px；高度:60px；边距:0 1rem；}

<div class="circle"></div><div class="circle"></div><div class="circle"></div>

解决方案

您可以使用 SVG 作为背景来做到这一点:

.bottom-bar {背景:#29a7e8；位置:绝对；底部:0；宽度:100%；高度:50px；文本对齐:居中；}.圆圈 {显示:内联块；位置:相对；顶部:-28px；边界半径:100%；背景: 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>"100% 100% 不重复；宽度:60px；高度:60px；边距:0 1rem；}

<div class="circle"></div><div class="circle"></div><div class="circle"></div>
<svg xmlns='http://www.w3.org/2000/svg'viewBox='10 10 45 15'宽度='64' 高度='64'填充='#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 {背景:#29a7e8；位置:绝对；底部:0；宽度:100%；高度:50px；文本对齐:居中；}.圆圈 {显示:内联块；位置:相对；顶部:-30px；背景:径向渐变(右上角的圆圈，透明 50%，#29a7e8 51%)100% 21px/12px 10px 不重复，径向渐变(左上角的圆圈，透明 50%，#29a7e8 51%)0 21px/12px 10px 不重复，径向渐变(中心圆形，#29a7e8 55%，透明 56%)；宽度:60px；高度:60px；边距:0 1rem；}

<div class="circle"></div><div class="circle"></div><div class="circle"></div>

I am building a website, and I'm having a hard time doing a detail in CSS

I need to make a round border that has a curved end, for you to understand better, I will show photo and post my code

What I need (Photoshop)

I would like a CSS solution, but I could not.

Here is what I have actually:

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

解决方案

You can do this using SVG as background:

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

For a CSS only solution you can consider a combination of radial-gradient to create the curve:

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

这篇关于边框弯曲 css - 带有弯曲末端的圆的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！