如何在css中剪切边框画出的线？

yftpprvb  于 2023-10-21  发布在  其他
关注(0)|答案(1)|浏览(143)

我为我的网站创建了一个“进度条”。我想把这条线剪下来，让它以这些点开始和结束。尝试了不同的利润率和东西，但这不是办法。我也有一个问题与文本下面的点。我可以把它们强制 Package 成更窄的文本，以便它们彼此保持更大的距离吗？Current designDesired design
代码如下：

  1. .wraper {
  2.   padding: 50px;
  3.   text-align: center;
  4.   font-family: sans-serif;
  5.   max-width: 1300px;
  6.   margin: 10px auto;
  7. }
  9. .container_wraper {
  10.   border-top: 2px solid #293ff9;
  11.   display: flex;
  12.   list-style: none;
  13.   padding: 0;
  14.   justify-content: space-between;
  15.   align-items: stretch;
  16.   align-content: stretch;
  17. }
  19. .link {
  20.   position: relative;
  21.   margin-top: 10px;
  22.   width: 100%;
  23. }
  25. .link a {
  26.   font-weight: bold;
  27.   font-size: 16px;
  28.   font-family: "poppins", sans-serif;
  29.   font-weight: 400;
  30.   font-style: normal;
  31.   color: #293ff9;
  32.   letter-spacing: 2px;
  33.   text-decoration: none;
  34.   text-transform: uppercase;
  35. }
  37. /* .link:first-child {
  38.     margin-left: -55px;
  39.   }
  40.   
  41.   .link:last-child {
  42.     margin-right: -55px;
  43.   } */
  45. .link::after {
  46.   content: "";
  47.   width: 12px;
  48.   height: 12px;
  49.   background: #fff;
  50.   position: absolute;
  51.   border-radius: 10px;
  52.   top: -18px;
  53.   left: 50%;
  54.   transform: translatex(-50%);
  55.   border: 2px solid blue;
  56. }
  58. .link:hover::after {
  59.   background: #293ff9;
  60. }
  62. .lead {
  63.   display: flex;
  64.   list-style: none;
  65.   text-align: center;
  66.   margin: 0 1px 0 1px;
  67.   padding: 0;
  68.   overflow-wrap: break-word;
  69.   font-weight: bold;
  70.   font-size: 10px;
  71.   margin-top: 3px;
  72.   font: sans-serif;
  73.   letter-spacing: 1px;
  74.   font-weight: 400;
  75.   text-decoration: none;
  76.   line-height: 1px;
  77. }
  1. <div class="wraper">
  3.   <ul class="container_wraper">
  4.     <li class="link"><a href="">Materiały</a></li>
  5.     <li class="link"><a href="">Algorytmy</a></li>
  6.     <li class="link active"><a href="">Szkolenia</a></li>
  7.   </ul>
  8.   <div class="lead">
  9.     <p class="lead1">Lorem ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit eligendi non id doloremque aliquid provident nobis consectetur recus.!</p>
  10.     <p class="lead2">Lorem ipsum dolor sit amet consectetur adipisicing elit. Eius vel perferendis repellat laborum iure laudantium ex ipsa repellendus dignissimos iusto.</p>
  11.     <p class="lead3">Lorem ipsum dolor sit amet consectetur adipisicing elit. Repudiandae officiis quae mollitia totam quis cumque a iste sapiente impedit neque illo eos .</p>
  12.   </div>
  13. </div>
css

1条答案

按热度按时间
epfja78i

epfja78i1#

1.要修剪行的开头和结尾，可以使用以下CSS代码。我删除了border-bottom，并使用::before选择器添加了蓝线。此外，我使用transform属性来线性调整::before选择器创建的直线。我还删除了固定的top属性值18，并将其替换为transform属性，以确保点与各种大小对齐。
1.要实现更窄的文本，您可以使用letter-spacing，或者在我看来，您可以使用所需设计中存在的字体。

  1. .wraper {
  2.   padding: 50px;
  3.   text-align: center;
  4.   font-family: sans-serif;
  5.   max-width: 1300px;
  6.   margin: 10px auto;
  7. }
  9. .container_wraper {
  10.   display: flex;
  11.   list-style: none;
  12.   padding: 0;
  13.   justify-content: space-between;
  14.   align-items: stretch;
  15.   align-content: stretch;
  16. }
  18. .link {
  19.   position: relative;
  20.   width: 100%;
  21. }
  23. .link::before {
  24.   content: "";
  25.   height: 2px;
  26.   display: block;
  27.   background-color: #293ff9;
  28.   width: 100%;
  29.   transform: translateX(50%);
  30. }
  32. .link:last-child:before {
  33.   content: "";
  34.   width: 0;
  35. }
  37. .link a {
  38.   font-weight: bold;
  39.   font-size: 16px;
  40.   font-family: "poppins", sans-serif;
  41.   font-weight: 400;
  42.   font-style: normal;
  43.   color: #293ff9;
  44.   letter-spacing: 2px;
  45.   text-decoration: none;
  46.   text-transform: uppercase;
  47.   margin-top: 10px;
  48.   display: block;
  49. }
  51. /* .link:first-child {
  52.     margin-left: -55px;
  53.   }
  54.   
  55.   .link:last-child {
  56.     margin-right: -55px;
  57.   } */
  59. .link::after {
  60.   content: "";
  61.   width: 12px;
  62.   height: 12px;
  63.   background: #fff;
  64.   position: absolute;
  65.   border-radius: 10px;
  66.   top: 0;
  67.   left: 50%;
  68.   transform: translate(-50%, -50%);
  69.   border: 2px solid blue;
  70. }
  72. .link:hover::after {
  73.   background: #293ff9;
  74. }
  76. .lead {
  77.   display: flex;
  78.   list-style: none;
  79.   text-align: center;
  80.   margin: 0 1px 0 1px;
  81.   padding: 0;
  82.   overflow-wrap: break-word;
  83.   font-weight: bold;
  84.   font-size: 10px;
  85.   margin-top: 3px;
  86.   font: sans-serif;
  87.   letter-spacing: 1px;
  88.   font-weight: 400;
  89.   text-decoration: none;
  90.   line-height: 1px;
  91. }
  1. <div class="wraper">
  3.   <ul class="container_wraper">
  4.     <li class="link"><a href="">Materiały</a></li>
  5.     <li class="link"><a href="">Algorytmy</a></li>
  6.     <li class="link active"><a href="">Szkolenia</a></li>
  7.   </ul>
  8.   <div class="lead">
  9.     <p class="lead1">Lorem ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit eligendi non id doloremque aliquid provident nobis consectetur recus.!</p>
  10.     <p class="lead2">Lorem ipsum dolor sit amet consectetur adipisicing elit. Eius vel perferendis repellat laborum iure laudantium ex ipsa repellendus dignissimos iusto.</p>
  11.     <p class="lead3">Lorem ipsum dolor sit amet consectetur adipisicing elit. Repudiandae officiis quae mollitia totam quis cumque a iste sapiente impedit neque illo eos .</p>
  12.   </div>
  13. </div>
展开查看全部
赞(0）分享  回复(0）举报  2023-10-21
我来回答

相关问题

    查看更多

    热门标签

    更多
    JavaquerypythonNode开发语言requestUtil数据库Table后端算法LoggerMessageElementParser

    最新问答

    更多
    • 蜀ICP备13028337号-1 大数据知识库 https://www.saoniuhuo.com © All rights reserved
    • 本站内容来源互联网,如果侵犯您的权益请联系我们删除, 联系方式：448109455@qq.com