[分享]css制作一条半圆线

CSS 是层叠样式表的缩写，是一种用于设计网页的语言。自从 CSS3 推出以来，它的应用范围更加广泛了。本文将介绍如何使用 CSS 制作半圆线，以及实现此效果的代码。/ 父元素 / div { wid...

CSS 是层叠样式表的缩写，是一种用于设计网页的语言。自从 CSS3 推出以来，它的应用范围更加广泛了。本文将介绍如何使用 CSS 制作半圆线，以及实现此效果的代码。

/* 父元素 */
div {
  width: 200px;
  height: 100px;
  border: 1px solid black;
  position: relative;
}

/* 半圆线 */
div::before {
  content: "";
  position: absolute;
  width: 100px;
  height: 200px;
  background-color: gray;
  border-radius: 50% 50% 0 0;
  transform: translate(-30px, -50px) rotate(-45deg);
  z-index: -1;
} 

首先，我们需要先创建一个父元素（div），然后设置它的宽度（width）、高度（height）和边框（border）的样式。为了实现半圆线，我们还需要将它的定位设置为相对定位（position: relative）。

接下来，我们就可以使用伪元素 (::before) 来创建我们想要的半圆线了。在伪元素的样式中，我们需要设置它的 position 为 absolute，width 和 height 分别为 100px 和 200px，这里的 width 和 height 可以根据实际需要进行调整。

然后，我们需要设置它的背景颜色（background-color）为灰色，border-radius 为 50% 50% 0 0，这样就可以得到一个半圆形。为了将半圆形旋转成我们想要的样子，我们还需要使用 transform 属性，将它向左上方移动 30px，向上移动 50px，并将其旋转 45 度。最后，我们需要将伪元素的 z-index 设置为 -1，这样它就可以在父元素的后面了。

最终，我们就可以得到一个漂亮的半圆线了！