如何弯曲接近圆的div/li

Question

我有以下代码。我想要实现的是 li:before 圆形部分应该具有曲线形式，以便与圆形相匹配。我试过了，但不知道怎么做。在这方面帮助我。

.test {
  list-style: none;
  margin: 0;
  padding: 0
}

.test li {
  float: left;
  margin: auto;
  width: 192px;
  height: 50px;
  border: 4px black double;
  text-align: center;
}

<div style="border:4px black double; height:200px;position:relative;background:url('')">
  <div class="myimage" style="width:200px; height:200px; position:absolute; top: 200;left: 0;right: 0;bottom: 0;margin: auto;border:8px gray double; border-radius:100px;background:url('') 200px; ">
  </div>
</div>
<div style="clear:both"></div>
<div style="border:1px green solid">
  <div style="border:1px red solid;float:left;width:602px;">
    <ul class="test">
      <li>1</li>
      <li>2</li>
      <li style="">3</li>
    </ul>
  </div>
  <div style="border:1px red solid;float:right;width:602px">
    <ul class="test">
      <li>4</li>
      <li>5</li>
      <li>6</li>
    </ul>
  </div>
  <div style="clear:both"></div>
</div>

Answer 1

您可以只使用 border-radius 和 padding 属性以及一些其他技巧来实现所需的布局。演示：

.test {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
}

.test li {
  width: 192px;
  height: 50px;
  border: 4px black double;
  text-align: center;
}

.test li:nth-child(3) {
  padding-right: 25px;
  border-top-right-radius: 25px;
  border-bottom-right-radius: 25px;
}

.test li:nth-child(4) {
  padding-left: 25px;
  border-top-left-radius: 25px;
  border-bottom-left-radius: 25px;
}

<div style="border:4px black double; height:200px;position:relative;background:url('')">
  <div class="myimage" style="box-sizing: border-box; width:200px; height:200px; position:absolute; top: 200;left: 0;right: 0;bottom: 0;margin: auto;border:8px gray double; border-radius:100px;background:url('') 200px; ">
  </div>
</div>
<div style="border: 1px green solid">
  <div style="border:1px red solid;">
    <ul class="test">
      <li>1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
      <li>5</li>
      <li>6</li>
    </ul>
  </div>
</div>

Answer 2

您正在寻找的是一种反边界边界遵循圆的外部形状的场景。

我有put together a solution。看看吧。

编辑：添加说明
为了达到结果，您需要添加一个div 在 li/div 中，您希望其边框弯曲。

为 child div 设置 position: relative 允许它四处移动，同时也给它一个默认值 z-index 这使得它的可见性高于 parent。由于只需要parentli/div的底部是弧形的，设置border-bottom-right-radius和border-bottom-left-radius 的 child div 到 100%。这将形成一个 semi-circle 从而有效地使您的 parent 的下边框看起来弯曲。但是现在，li/div 元素看起来好像它们的底部 right/left 边框已经消失了。要模拟这些边界，只需设置childdivborder-left/right属性。

也不要忘记在容器中添加 overflow: hidden 并将相同的 background-colour 应用到所有涉及到的元素，因为如果不设置颜色，需要隐藏的部分将可见，解决方案将不起作用。

这是相同的代码。

ul {
  list-style: none;
  overflow: hidden;
  background-color: white;
}

li {
  float: left;
  border: 2px solid black;
  width: 100px;
  height: 30px;
  text-align: center;
  background-color: white;
}

.right-circle {
  position: relative;
  border-bottom-left-radius: 100%;
  border-bottom-right-radius: 100%;
  width: 60px;
  height: 40px;
  background-color: white;
  border-left: 2px solid black;
  top: -22px;
  left: 90px;
}

.left-circle {
  position: relative;
  border-bottom-left-radius: 100%;
  border-bottom-right-radius: 100%;
  width: 60px;
  height: 40px;
  background-color: white;
  border-right: 2px solid black;
  top: -22px;
  left: -50px;
}

.empty {
  border: none;
  width: 50px;
}

<ul>
  <li>Element
    <div class="right-circle"></div>
  </li>

  <li class="empty"></li>
  <li>Element
    <div class="left-circle"></div>
  </li>
</ul>

Answer 3

你不能在 css 中创建这样的 div 形状，只能伪造它。

方法一：

#normal{
  /*box with normal border*/
  display: inline-block;
  width: calc(200px);
  height: calc(50px);
  border: 4px solid black;  
}
#curved{
  /*Faking the border*/
  display: inline-block;
  margin-top: 100px; 
  width: calc(200px + 4*0px);
  height: calc(50px + 4*0px);
  padding:4px; /* faking border space */
  border-width: 0;

  /*faking full border border*/
  background:
  radial-gradient(
    circle at 250px -50px,   /*center at 250,-50 from top left corner*/
    white,
    white calc(50*1.414px + 30px),  
    black calc(50*1.414px + 30px),
    black calc(53*1.414px + 30px),
    transparent calc(53*1.414px + 30px),
    transparent
    ), 
  /*faking straight lines*/
  linear-gradient(to bottom,black,black 4px,transparent 4px,transparent), /*top border*/
  linear-gradient(to left,black 4px,transparent 4px,transparent), /*right border*/
  linear-gradient(to top,black 4px,transparent 4px,transparent), /*bottom border*/
  linear-gradient(to right,black 4px,transparent 4px,transparent) /*left border*/
  ;

}

<div id="normal">1</div>
<div id="curved">2</div>

图片说明：

框外的所有内容都被剪掉了，这就是渐变的工作原理。可以创建不同尺寸的椭圆或圆。径向渐变位于其他四个假边框之上。

方法二：

div{
  margin: 50px;
  position: relative;
  background-color: red;
  width: 200px;
  height: 50px;
  overflow: hidden;
}
div::before{
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  border: 2px solid black;
  box-sizing:border-box;
}
div::after{
  content: '';
  position: absolute;
  background-color: white;
  width: 100px;
  height: 100px;
  border-radius: 100%;
  top: -2px;
  left:200px;
  transform:translate(-50%,-50%);

  border: 2px solid black; 
}

<div></div>

如何弯曲接近圆的div/li

How to curve the div/li which is near to circle

html

css

curve