制作弯曲的虚线

Question

如何制作弯曲的虚线，如下图所示：

我尝试了下面的代码，但这不是我想要的，它不会弯曲：

ul:before {
  content: '';
  position: absolute;
  left: 11px;
  top: -15%;
  right: calc(100% - 130px);
  bottom: -63px;
  background-image: -ms-radial-gradient(circle at 8.5px, rgba(0,0,0,0) 102.25px, rgba(255,255,255,0) 1.5px), -ms-radial-gradient(circle, #000 0.25px, rgba(255,255,255,0) 0.5px), -ms-radial-gradient(circle at 1.5px, #000 0.25px, rgba(255,255,255,0) 0.5px), -ms-radial-gradient(circle, rgba(0,0,0,0) 0.25px, rgba(255,255,255,0) 1.5px);
  background-image: radial-gradient(circle at 8.5px, rgba(0,0,0,0) 102.25px, rgba(255,255,255,0) 1.5px), radial-gradient(circle, #000 0.25px, rgba(255,255,255,0) 0.5px), radial-gradient(circle at 1.5px, #000 0.25px, rgba(255,255,255,0) 0.5px), radial-gradient(circle, rgba(0,0,0,0) 0.25px, rgba(255,255,255,0) 1.5px);
  background-position: top, left, bottom, right;
  background-size: 15px 5px, 5px 15px;
  background-repeat: repeat-x, repeat-y;
  border-radius: 15px;
  z-index: -1;
}

Answer 1

您可以考虑使用SVG进行以下构建：

>

svg {
  width: 160px;
}

path {
  fill: none;
  stroke-dasharray: 2, 10; /*adjust this to control the number of dots*/
  stroke-width:2px;
}

Answer 2

我认为这可以使您走上正确的道路：

#include <stdio.h>
#include <ctype.h> //For tolower()

int main()
{
    char str1[]="Time", str2[]="time";
    /*
     * Just for an example i am comparing the first char
     * from 2 different strings.
     */
    if(tolower(str1[0]) ==tolower(str2[0])) {
        printf("Char's are equal\n");
    }
    else {
        printf("Char's are not equal");
    }
    return 0;
}

ul {
  background-color: #eee;
  display: table;
  height: 100px;
  width: 350px;
}
ul:after {
  border-bottom: 3px dotted #666;
  border-right: 3px dotted #666;
  border-radius: 50px;
  content: '';
  display: block;
  height: 500%;
  width: 200%;
}

从此处修改：Any way to declare a size/partial border to a box?

Answer 3

带有dotted的容器上的border-radius边框可以达到这种效果。

* {
  box-sizing: border-box;
}
.dotted-list {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  list-style: none;
  margin: 0;
  padding: 0;
  width: 200px;
  height: 330px;
  background: #f5f5f5; /* this color is just here so you can see the container for demo, take away to complete the effect */
  border-radius: 40px;
  border: 4px dotted #999;
}
.dotted-list .step-number {
  align-self: flex-end;
}
.dotted-list .step-number span {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 30px;
  width: 30px;
  border-radius: 50%;
  margin-right: -15px;
  margin-bottom: 30px;
  background-color: green;
  color: white;
}
.call-to-action {
  margin-bottom: -20px;
}
.call-to-action button {
  height: 40px;
  line-height: 40px;
  padding: 0 40px;
  border: none;
  border-radius: 12px;
  background: green;
  color: white;
  cursor: pointer;
}

<ul class="dotted-list">
  <li class="step-number">
    <span>1</span>
  </li>
  <li class="step-number">
    <span>2</span>
  </li>
  <li class="step-number">
    <span>3</span>
  </li>
  <li class="step-number">
    <span>4</span>
  </li>
  <li class="call-to-action">
    <button>Click Me</button>
  </li>
</ul>