如何用CSS和div实现这种布局？

Question

如何使用 CSS 和 div 实现此虚线边框布局？

Answer 1

首先，您应该尝试自己尝试。我知道作为一个初学者，总是很高兴，但是我真的不能强调尝试自己的重要性，不仅会帮助你提高开发人员的水平，还会让很多人在这个网站上感到高兴，并且可以阻止这个问题。闭合。

现在回答我的答案

CSS

我已经形成了一个紧密的形状，但它并不完美。您可以看到我是如何尝试它并尝试根据自己的喜好进行修改。

＆＃13;

＆＃13;

body {
  background: darkred;
}
div {
  margin: 120px 20px;
  width: 200px;
  height: 150px;
  border-left: 2px dotted white;
  border-right: 2px dotted white;
  background: transparent;
  position: relative;
}
div:before,
div:after {
  content: '';
  width: 140px;
  height: 140px;
  background: transparent;
  position: absolute;
  top: -73px;
  left: 30px;
  transform: rotate(45deg);
  border-top: 2px dotted white;
  border-left: 2px dotted white;
}
div:after {
  top: initial;
  bottom: -73px;
  border-top: 0;
  border-left: 0;
  border-bottom: 2px dotted white;
  border-right: 2px dotted white;
}

＆＃13;

<div></div>

＆＃13;

＆＃13;

＆＃13;

SVG

这是我实际建议你选择这种形状的路线。要在CSS中获得完美的，响应式六边形将需要相当多的编码，并且可能并不总是得到很好的支持。另一方面，SVG得到了很好的支持，并且相对容易实现。

＆＃13;

＆＃13;

body {
  background: darkred;
}

＆＃13;

<svg viewBox="0 0 100 100" width="40%" height="40%">
  <path d="M50,1 L99,27 L99,73 L50,99 L1,73 L1,27z" fill="transparent" stroke="white" stroke-width="1" stroke-dasharray="1,1" />
</svg>

＆＃13;

＆＃13;

＆＃13;