How to create SVG 4 triagle in square

Question

I need to create an svg shape, with this kind of look:

I'm trying to implement this with properties stroke-dasharray and stroke-dashoffset, but I can not do it.

Example:

http://jsfiddle.net/L9y6Ld97/

CSS:

@import url(https://fonts.googleapis.com/css?family=Roboto:300,400,500);
* {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
*:after, *:before {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

html {
  height: 100%;
}

body {
  height: 100%;
  overflow: hidden;
  padding: 0;
  margin: 0;
  background-color: #333;
  padding-top: 50px;
}

.row {
  width: 700px;
  margin: 0 auto;
  overflow: hidden;
}

.col {
  float: left;
  width: 33.33333%;
  text-align: center;
}

.button {
  position: relative;
  height: 50px;
  padding: 0 10px;
  width: 180px;
  font-family: 'Roboto', sans-serif;
  text-transform: uppercase;
  display: inline-block;
  cursor: pointer;
}
.button .shape {
  stroke-dasharray: 45, 180px;
  stroke-dashoffset: 18px;
}

.button svg {
  position: relative;
  z-index: 1;
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  z-index: 0;
}
.button .content {
  color: #2980b9;
  line-height: 50px;
  text-align: center;
  z-index: 2;
  position: relative;
  vertical-align: middle;
  -moz-transition: all 0.4s ease-in-out;
  -o-transition: all 0.4s ease-in-out;
  -webkit-transition: all 0.4s ease-in-out;
  transition: all 0.4s ease-in-out;
}
.button:hover .content {
  color: #e74c3c;
}
.button:hover .shape {
  stroke: #000;
}
.button .shape {
  fill: transparent;
  stroke: #fff;
  -moz-transition: all 0.4s ease-in-out;
  -o-transition: all 0.4s ease-in-out;
  -webkit-transition: all 0.4s ease-in-out;
  transition: all 0.4s ease-in-out;
  stroke-width: 6px;
}

HTML:

<div class='row'>
  <div class='col'>
    <div class='button'>
      <svg xmlns='http://www.w3.org/2000/svg'>
        <rect class='shape' height='100%' width='100%'></rect>
      </svg>
      <div class='content'>Hello</div>
    </div>
  </div>
</div>

Answer 1

It's going to be very hard to achieve if you define your <rect> with 100% for width and height. If you instead use a specific size for the rectangle (eg. 100 x 50) and use an appropriate viewBox, finding an appropriate dash pattern will be a lot easier.

Because the SVG has a viewBox, and we specify preserveAspectRatio="none", it will stretch to fit the button.

How the dasharray is defined

Our rectangle has a width of 100 and a height of 50. And I am going to make the "legs" of the corner pieces 10.

Dash arrays for rectangle elements start at the top left and proceed clockwise. Therefore the dash pattern for the top and bottom sides of the rectangle are:

== 10 ==           80           == 10 ==   

And for the left and right sides it is

== 10 ==       30       == 10 ==

(except vertical of course)

The three corners except the top left one can be joined together, since they flow around the corner. So our dash array becomes:

     10            80                20
    +---                        ---+
10  |                              |

30                                   30

    |                              |
    +---                        ---+
 20                                  20

Giving a final stroke-dasharray: 10 80 20 30 20 80 20 30 10 0;

Demo

@import url(https://fonts.googleapis.com/css?family=Roboto:300,400,500);
* {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
*:after, *:before {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

html {
  height: 100%;
}

body {
  height: 100%;
  overflow: hidden;
  padding: 0;
  margin: 0;
  background-color: #333;
  padding-top: 50px;
}

.row {
  width: 700px;
  margin: 0 auto;
  overflow: hidden;
}

.col {
  float: left;
  width: 33.33333%;
  text-align: center;
}

.button {
  position: relative;
  height: 50px;
  padding: 0 10px;
  width: 180px;
  font-family: 'Roboto', sans-serif;
  text-transform: uppercase;
  display: inline-block;
  cursor: pointer;
}
.button .shape {
  stroke-dasharray: 10 80 20 30 20 80 20 30 10 0;
}

.button svg {
  position: relative;
  z-index: 1;
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  z-index: 0;
}
.button .content {
  color: #2980b9;
  line-height: 50px;
  text-align: center;
  z-index: 2;
  position: relative;
  vertical-align: middle;
  -moz-transition: all 0.4s ease-in-out;
  -o-transition: all 0.4s ease-in-out;
  -webkit-transition: all 0.4s ease-in-out;
  transition: all 0.4s ease-in-out;
}
.button:hover .content {
  color: #e74c3c;
}
.button:hover .shape {
  stroke: #000;
}
.button .shape {
  fill: transparent;
  stroke: #fff;
  -moz-transition: all 0.4s ease-in-out;
  -o-transition: all 0.4s ease-in-out;
  -webkit-transition: all 0.4s ease-in-out;
  transition: all 0.4s ease-in-out;
  stroke-width: 6px;
}

    <div class='row'>
      <div class='col'>
        <div class='button'>
          <svg viewBox="0 0 100 50" preserveAspectRatio="none">
            <rect class='shape' height='50' width='100'></rect>
          </svg>
          <div class='content'>Hello</div>
        </div>
      </div>
    </div>

Answer 2

With a bit of creative use of clipping and relative units, you can get there:

For a given stroke length from the corner, place a <rect> of double that height and width with their origin on every corner of a clip path (defined as percentage), then translate the clip path up and left by the stroke length.

Vertical and horizontal length can be defined independently.

@import url(https://fonts.googleapis.com/css?family=Roboto:300,400,500);

body {
  background-color: #333;
  padding: 50px;
}

.button {
  position: relative;
  height: 50px;
  padding: 0 10px;
  width: 180px;
  font-family: 'Roboto', sans-serif;
  text-transform: uppercase;
  display: inline-block;
  cursor: pointer;
}

.button svg {
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 0;
}
.button .content {
  color: #2980b9;
  line-height: 50px;
  text-align: center;
  z-index: 2;
  position: relative;
  vertical-align: middle;
  -moz-transition: all 0.4s ease-in-out;
  -o-transition: all 0.4s ease-in-out;
  -webkit-transition: all 0.4s ease-in-out;
  transition: all 0.4s ease-in-out;
}
.button:hover .content {
  color: #e74c3c;
}
.button:hover .shape {
  stroke: #000;
}
.button .shape {
  fill: transparent;
  stroke: #fff;
  -moz-transition: all 0.4s ease-in-out;
  -o-transition: all 0.4s ease-in-out;
  -webkit-transition: all 0.4s ease-in-out;
  transition: all 0.4s ease-in-out;
  stroke-width: 6px;
}

<div class='button'>
  <svg xmlns='http://www.w3.org/2000/svg'>
    <clipPath id="clip" clipPathUnits="userSpaceOnUse" transform="translate(-20, -15)">
      <rect x="0" y="0" width="40" height="30" />
      <rect x="100%" y="0" width="40" height="30" />
      <rect x="100%" y="100%" width="40" height="30" />
      <rect x="0" y="100%" width="40" height="30" />
    </clipPath>
    <rect clip-path="url(#clip)" class="shape" y="0" x="0" height="100%" width="100%" />
  </svg>
  <div class='content'>Hello</div>
</div>