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

Question

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

Answer 1

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

现在回答我的问题

CSS

我做得很近但不完美.您可以看到我是如何尝试它并尝试根据自己的喜好进行修改.

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;
}

<div></div>

SVG

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

body {
  background: darkred;
}

<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>