Xóa border trong htm

haidangle · October 13, 2020, 4:57pm

a/c cho em hỏi có cách nào để xóa 1 phần nhỏ của border không ạ, chỉ là một phần nhỏ của 1 cạnh thôi không hoàn toàn là một cạnh?

TuChiDo · October 14, 2020, 1:49am

Thử cách này xem sao

<div style="width: 100px; height: 100px; border: 1px solid red; border-right: none;">
   <div style="height: 50%; border-right: 1px solid red;"></div>
</div>

kết quả :

LocNguyenXuan99 · October 14, 2020, 6:03am

Dùng svg kết hợp stroke-dasharray; và stroke-dashoffset.

<!DOCTYPE html>
<html>
<style>
.container{
  width: 620px;
  height: 400px;
  background: #f8fe20;
  box-sizing: border-box;
}

.border{
  width: 100%;
  height:100%;
  stroke-dasharray: 10000; //tính toán để ra giá trị tương ứng
  stroke-dashoffset: 10000; //tính toán để ra giá trị tương ứng
  animation: dash 15s linear forwards;
}
@keyframes dash {
  to {
    stroke-dashoffset: 0;
  }
}
</style>

<body>
<div class='container'>
  <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%"  viewBox="0 0 100 100" preserveAspectRatio="none" class='border'>
    <path d='M0 0 H100  V 100  H0 V0' stroke="green" stroke-width="4" fill='none' vector-effect="non-scaling-stroke"></path>
  </svg>
  <div>Hello</div>
</div>
</body>
</html>

Trong TH container bạn muốn thêm các div vào container, bạn có thể set

.container{
      position: relative;
}
.border{
    position: absolute;
    top: 0;
    left: 0;
}