Question

我在三角形上使用了柔韧性框方向行，并且在它们之间留下了1px的标记。请帮忙。

* {
  margin: 0;
}

body {
  background: #3A3335;
  border: none;
}

.lightning {
  display: flex;
  flex-direction: row;
  flex-wrap: no-wrap;
  align-items: center;
  justify-content: center;
  margin: auto;
  width: 400px;
  height: 400px;
  margin-top: calc((100vh - 400px) / 2);
}

.lightning .left_cont .head {
  width: 0;
  height: 0;
  border-top: 80px solid transparent;
  border-bottom: 15px solid transparent;
  border-right: 60px solid #F5AB30;
}

.lightning .left_cont .tail {
  width: 0;
  height: 0;
  border-top: 15px solid transparent;
  border-bottom: 80px solid transparent;
  border-right: 60px solid #F5AB30;
}

.lightning .right_cont {
  margin-top: 80px;
  border: none;
}

.lightning .left_cont {}

.lightning .right_cont .head {
  width: 0;
  height: 0;
  border-top: 80px solid transparent;
  border-bottom: 15px solid transparent;
  border-left: 60px solid #F5AB30;
}

.lightning .right_cont .tail {
  width: 0;
  height: 0;
  border-top: 15px solid transparent;
  border-bottom: 80px solid transparent;
  border-left: 60px solid #F5AB30;
}

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>Lighning</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" type="text/css" media="screen" href="main.css" />
</head>

<body>
  <div class="lightning">
    <div class="left_cont">
      <div class="head"></div>
      <div class="tail"></div>
    </div>
    <div class="right_cont">
      <div class="head"></div>
      <div class="tail"></div>
    </div>
  </div>
</body>

</html>

我不知道该怎么办。也许该错误是基于我使用三角形但我不确定的事实。

我正在使用Chrome。起初看起来不是这样，但是当您放大和缩小时，在left_cont和right_cont div之间确实存在1px的距离。

带有弹性框的三角形留有1px的间隙

0 个答案: