-1

How to achieve this dotted border layout with CSS and div?

enter image description here

veeking
  • 45
  • 5
  • 7
    It is expected that you at least attempt to code this for yourself. Stack Overflow is not a code writing service. I would suggest that you do some additional research, either via Google or by searching SO, make an attempt and. if you still have trouble, come back with **your code** and explain what you have tried and why it did not work. – Paulie_D Apr 07 '16 at 12:39
  • 2
    Have a look at this thread for ideas - http://stackoverflow.com/questions/19418486/hexagon-shape-with-a-border-outline/31919429#31919429. The inner dotted layer will be tough to achieve with CSS and SVG would be a better option. Also, as Paulie_D has mentioned, you should post the code that you've tried so far. Else, the question will most likely be closed (and downvoted). – Harry Apr 07 '16 at 12:40
  • Yes please try some code for this at your end and in code if you face any problem then ask on StackOverFlow with your code. – Mohit Saxena Apr 07 '16 at 13:06
  • Is there any specific reason why the solution should be CSS and a DIV? That is a prime use case for SVG. Here are a few examples: http://codepen.io/cwmanning/pen/Hugye – Razvan Caliman Apr 07 '16 at 13:33

1 Answers1

5

To start with, you should have really tried to attempt this yourself. I know as a beginner it is always nice to just ask and get but I really cannot stress the importance of trying yourself, not only will it help you improve as a developer but also keep many people on this website happy and stop the question being possibly closed.

Now to my answers

CSS

I've made a close shape but it's not perfect. You can see how I've attempted it and try to amend it to your liking. 

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

This is the route I would actually recommend you take for a shape of this kind. To get a perfect, responsive hexagon in CSS will take quite a lot of coding and may not always be well support. SVG on the other hand is very well supported and is relatively easy to do.

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>
Stewartside
  • 20,378
  • 12
  • 60
  • 81