时间戳

首页 > 解决方案 > 如何使用css制作线条

html - 如何使用css制作线条

问题描述

我想使用css在图像中制作一条黄线，但我不知道如何制作，现在我只能制作线孔，但还不能制作垂直直线。

在此处输入图像描述

这是我的代码示例

#holes {
  -webkit-mask: radial-gradient(circle at 120px 100%, transparent 0, transparent 62px, black 62px, black 100%);
   mask: radial-gradient(circle at 120px 100%, transparent 0, transparent 62px, black 62px, black 100%);
   background-color: #1D3962;
   background-image: radial-gradient(circle at 120px 100%, transparent 0, transparent 65px, yellow 65px, yellow 68px, transparent 68px, transparent 100%);
   width: 100%;
   height: 100vh;
   margin: 0;
   padding: 0;
}

标签： htmlcss

解决方案

我正在为您编写一个代码，如果您喜欢该解决方案，它可能会解决您的问题，那么请给它一个喜欢

您可以更改宽度的值以使其变薄或变厚。

*{
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
#holes {
  -webkit-mask: radial-gradient(circle at 120px 100%, transparent 0, transparent 62px, black 62px, black 100%);
   mask: radial-gradient(circle at 120px 100%, transparent 0, transparent 62px, black 62px, black 100%);
   background-color: #1D3962;
   background-image: radial-gradient(circle at 120px 100%, transparent 0, transparent 65px, yellow 65px, yellow 68px, transparent 68px, transparent 100%);
   width: 100%;
   height: 100vh;
   margin: 0;
   padding: 0;
}

#holes::before{
  content: "";
  display: block;
  width: 2px;
  height: calc(100vh - 68px);
  background-color: yellow;
  margin-left: 120px;
}
<div id="holes"></div>

推荐阅读