Question

请参阅附件 image

如何从div中隐藏红线（其跨度）？
左边距无效，因为线在另一侧。
如何解决？

@keyframes linewidth1 {
    0%{
        border-bottom: 4px solid white;
        width: 0%;
    }
    25%{
        border-bottom: 4px solid white;
        border-bottom: 4px solid white;
        width: 0%;
    }
    60%{
        border-bottom: 4px solid white;
        border-bottom: 4px solid white;
    }
    75%{
        border-bottom: 2px solid transparent;
        border-bottom: 2px solid transparent;
    }
    90%{
        width: 100%;
        border-bottom: 2px solid #e10000;
        border-bottom: 2px solid #e10000;
    }
}
.line2 {
  left: 0;
  animation: linewidth1 3s;
  border-bottom: 2px solid #e10000;
  width: 100%;
  float: left;
  height: 1px;
  display: inline-block;
  margin-top: 57px;
}

.single_style {
  position: relative;
  padding-top: 15px;
  background-color: rgb(238, 238, 234);
  background-repeat: repeat;
  background-size: auto auto;
  border-bottom-color: cadetblue;
  border-bottom-left-radius: 57px;
  border-bottom-right-radius: 11px;
  border-bottom-style: solid;
  border-left-color: cadetblue;
  border-left-style: solid;
  border-right-color: cadetblue;
  border-right-style: solid;
  border-top-color: cadetblue;
  border-top-left-radius: 170px;
  border-top-right-radius: 39px;
  border-top-style: solid;
  border-top-width: 4px;
  border-right-width: 2px;
  border-left-width: 1px;
  border-bottom-width: 1px;
  margin-left: 20px;
  margin-right: 3%;
  margin-top: auto;
  max-width: 1200px;
  margin-bottom: 5px;
  margin-top: 5px;
}

<body>
  <div class="single_style" style="height:200px;">

    <span class="line2"></span>

  </div>
</body>

如何从div中隐藏红线（其跨度）？
左边距无效，因为线在另一侧。
如何解决？

Answer 1

将overflow: hidden;添加到了.single_style

.line2 {
  left: 0;
  animation: linewidth1 3s;
  border-bottom: 2px solid #e10000;
  width: 100%;
  float: left;
  height: 1px;
  display: inline-block;
  margin-top: 57px;
}

.single_style {
  position: relative;
  padding-top: 15px;
  background-color: rgb(238, 238, 234);
  background-repeat: repeat;
  background-size: auto auto;
  border-bottom-color: cadetblue;
  border-bottom-left-radius: 57px;
  border-bottom-right-radius: 11px;
  border-bottom-style: solid;
  border-left-color: cadetblue;
  border-left-style: solid;
  border-right-color: cadetblue;
  border-right-style: solid;
  border-top-color: cadetblue;
  border-top-left-radius: 170px;
  border-top-right-radius: 39px;
  border-top-style: solid;
  border-top-width: 4px;
  border-right-width: 2px;
  border-left-width: 1px;
  border-bottom-width: 1px;
  margin-left: 20px;
  margin-right: 3%;
  margin-top: auto;
  max-width: 1200px;
  margin-bottom: 5px;
  margin-top: 5px;
  overflow: hidden;
}

<body>
  <div class="single_style" style="height:200px;">

    <span class="line2"></span>

  </div>
</body>

Answer 2

只需使用背景创建此行：

.single_style {
  background:linear-gradient(#e10000,#e10000) 0 57px/100% 2px no-repeat;
  animation: linewidth1 3s;

  padding-top: 15px;
  background-color: rgb(238, 238, 234);
  border-radius:170px 39px 11px 57px;
  border-top: 4px solid;
  border-right: 2px solid;
  border-left: 1px solid;
  border-bottom: 1px solid;
  border-color: cadetblue;
  margin:5px 3% 5px 20px;
  max-width: 1200px;
}

@keyframes linewidth1 {
    0%,25%{
        background-size:0% 2px;
        background-image:linear-gradient(#fff,#fff);
    }
    60%{
        background-size:100% 4px;
    }
    75%{
       background-size:100% 0px;
        background-image:linear-gradient(#fff,#fff);
    }
    75.01%{
       background-size:100% 0px;
        background-image:linear-gradient(#e10000,#e10000);
    }
    90%{
       background-size:100% 2px;
        background-image:linear-gradient(#e10000,#e10000);
    }
}

<body>
  <div class="single_style" style="height:200px;">

  </div>
</body>

Answer 3

将跨度浮动到右侧，并将其宽度减小到95％

.line2 {
		left:0;
		animation: linewidth1 3s;
		border-bottom: 2px solid #e10000;
		width: 95%;
		float: right;
		height: 1px;
		display: inline-block;
		margin-top: 57px ;
	}
  
  .single_style{
	position: relative;
	padding-top: 15px;
	background-color: rgb(238, 238, 234);
	background-repeat: repeat;
	background-size: auto auto;
	border-bottom-color: cadetblue;
	border-bottom-left-radius: 57px;
	border-bottom-right-radius: 11px;
	border-bottom-style: solid;
	border-left-color: cadetblue;
	border-left-style: solid;
	border-right-color: cadetblue;
	border-right-style: solid;
	border-top-color: cadetblue;
	border-top-left-radius: 170px;
	border-top-right-radius: 39px;
	border-top-style: solid;
	border-top-width: 4px;
	border-right-width: 2px;
	border-left-width: 1px;
	border-bottom-width: 1px;
	margin-left: 20px;
	margin-right: 3%;
	margin-top: auto;
	max-width: 1200px;
	margin-bottom: 5px;
	margin-top: 5px;
	}

<body>
<div class="single_style" style="height:200px;">
 
 <span class="line2"></span>
  
</div>
</body>

CSS从div中隐藏红线（是跨度）？

3 个答案: