小编Sur*_*-Ui的帖子

我正在尝试在 css 中创建自定义滚动条，但它不是跨浏览器，我想用 javascript 使其跨浏览器。滚动条不在 body 标签中。滚动条位于卡片盒（类别）中。这是屏幕截图：
单击此处查看屏幕截图
这是我的 html 代码：

<section class="quickSearch">
    <div class="quickSearchWrapper">
        <div class="container">
            <div class="quickSearch-header">
                <div class="fw-5">Quick Search</div>
                <a href="#">View All</a>
            </div>
            <div class="quickSearch-body">
                <div class="quickSearch-categories"> // Here is am placing overflow scrollbar 'x axis'
                    <div class="quickSearch-category">
                        <a href="#" class="btn rounded quickSearch-category--name">Creative</a>
                    </div>
                    <div class="quickSearch-category">
                        <a href="#" class="btn rounded quickSearch-category--name">Landing Page</a>
                    </div>
                    <div class="quickSearch-category">
                        <a href="#" class="btn rounded quickSearch-category--name">eCommerce</a>
                    </div>
                    <div class="quickSearch-category">
                        <a href="#" class="btn rounded quickSearch-category--name">Education</a>
                    </div>
                    <div class="quickSearch-category">
                        <a href="#" class="btn rounded quickSearch-category--name">Real …

我已经尝试过这段代码，但面临大小问题。在更改圆形边框的大小时遇到​​问题，所以请帮助我解决这个问题。在代码片段上运行代码，将知道我遇到了什么问题，它应该看起来像图像中的我给了。这是在html中使用css的代码。如何自定义图形。通过在 html 中使用 css 来使图表部分的特定大小发生变化，但无法自定义图表。如何自定义它。可以在css中自定义吗？

body{
  background: darkturquoise;
}

.circle-sector {
  overflow: hidden;
  width: 150px;
  height: 75px;
  transform-origin: 50% 100%;
  position: absolute; 
}

.circle {
  margin-top:18px;
    margin-left:5px;
  width: 90px;
  height: 60px;
  border-radius: 60px 60px 0 0;
  background: #00aaad ;
  transform-origin: 50% 100%;
  transform: rotate(90deg);
    
}

.center {
  width: 80px;
  height: 80px;
  margin-left: 10px;
  background: darkturquoise;
  border-radius: 50%;
  margin-top: 60px;
  transform: rotate(0deg);
  position: absolute;
   
}
.another-circle {
  width: 100px;
  margin-left: 0px;
  height: 50px;
  margin-top: 0px;
  border-radius: 50px 50px 0 0;
  background: …

我已经用下面的代码完成了这项工作，但我认为这是一种很难做到的方法，任何人都可以通过 css 和 html 轻松创建它。

.fline {
  width: 2px;
  background-color: black;
  height: 10px;
  margin-left: 30%;
  margin-top: -9px;
}

.fline1 {
  width: 2px;
  background-color: black;
  height: 10px;
  margin-left: 60%;
  margin-top: -10px;
}

.fline2 {
  width: 2px;
  background-color: black;
  height: 10px;
  margin-left: 88.2%;
  margin-top: -11px;
}

<hr style="width: 300px;margin-left: 30%;color:black">
<div class="fline"></div>
<div class="fline1"></div>
<div class="fline2"></div>