时间戳

首页 > 解决方案 > 带有弹性框的三角形留下 1px 的间隙

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

问题描述

我在我的三角形上使用了 flex box 方向行，它在它们之间留下了 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>

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

我正在使用铬。起初它看起来不像，但是当你放大和缩小时，left_cont 和 right_cont div 之间确实有 1px 的间隙。

标签： htmlcssflexbox

解决方案

推荐阅读