如何用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>

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

How to achieve this layout with CSS and div?

html

css

css-shapes

CSS

SVG