How would I create a title inside a diamond shape, with CSS?

Question

I would like to create a style treatment, similar to this:

How would something like this work?

Solution 1

Using CSS Transforms:

You can create the diamond shape by using two pseudo elements and CSS rotate transforms like in the below snippet. This would make the text not be affected by the transforms and so positioning it would be relatively easy.

The rotateZ(45deg) produces a diamond shape with equal sides while the extra rotateX(45deg) is responsible for the stretched appearance which makes the sides look like they are of unequal lengths.

Text positioning is rather simple and all that is needed is to align it to the center and then set the line-height to be same as the height of the container. Note that this method of vertical centering would work only when the text is in a single line. If it can span across multiple lines then it should be put in an extra element and the translateY(-50%) transform should be used for vertical centering.

.diamond {
  position: relative;
  height: 200px;
  width: 200px;
  line-height: 200px;
  text-align: center;
  margin: 10px 40px;
}
.diamond:before {
  position: absolute;
  content: '';
  top: 0px;
  left: 0px;
  height: 100%;
  width: 100%;
  transform: rotateX(45deg) rotateZ(45deg);
  box-shadow: 0px 0px 12px gray;
}
.diamond:after {
  position: absolute;
  top: 10px;
  left: 10px;
  content: '';
  height: calc(100% - 22px);  /* -22px is 2 * 10px gap on either side - 2px border on either side */
  width: calc(100% - 22px);  /* -22px is 2 * 10px gap on either side - 2px border on either side */
  border: 1px solid orange;
  transform: rotateX(45deg) rotateZ(45deg);
}

<div class='diamond'>
  Text Here
</div>

---

Using SVG:

The same shape can be created using SVG path elements also instead of CSS transforms. Sample is available in the below snippet.

.diamond {
  position: relative;
  height: 200px;
  width: 300px;
  line-height: 200px;
  text-align: center;
}
.diamond svg {
  position: absolute;
  top: 0px;
  left: 0px;
  height: 100%;
  width: 100%;
  z-index: -1;
}
path.outer {
  fill: white;
  stroke: transparent;
  -webkit-filter: url(#dropshadow);
  filter: url(#dropshadow);
}
path.inner {
  fill: transparent;
  stroke: orange;
}

<div class='diamond'>
  <svg viewBox='0 0 100 100' preserveAspectRatio='none'>
    <filter id="dropshadow" height="125%">
      <feGaussianBlur in="SourceAlpha" stdDeviation="1" />
      <feOffset dx="0" dy="0" result="offsetblur" />
      <feMerge>
        <feMergeNode/>
        <feMergeNode in="SourceGraphic" />
      </feMerge>
    </filter>
    <path d='M2,50 50,2 98,50 50,98z' class='outer' />
    <path d='M8,50 50,8 92,50 50,92z' class='inner' />
  </svg>
  Text Here
</div>

<!-- Filter Code Adopted from http://stackoverflow.com/questions/6088409/svg-drop-shadow-using-css3 -->

Solution 2

Does the diamond has to have different width and height? Otherwise you could just transform a square with the pseudo-elements.

body {
  text-align: center;
  padding-top: 30px;
}
.diamond {
  width: 100px;
  height: 100px;
  position: relative;
  margin-top: 25px;
  display: inline-block;
}
.diamond:before {
  position: absolute;
  display: block;
  content: "";
  width: 100px;
  height: 100px;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  -webkit-transform: rotate(45deg);
  -webkit-transition: border-color 0.3s;
  -moz-transform: rotate(45deg);
  -moz-transition: border-color 0.3s;
  transform: rotate(45deg);
  box-shadow: 0px 0px 21px -2px rgba(0, 0, 0, 0.25);
}
.diamond-inner {
  width: 80px;
  height: 80px;
  position: relative;
  margin-top: 25px;
  display: inline-block;
}
.diamond-inner:before {
  position: absolute;
  display: block;
  content: "";
  width: 80px;
  height: 80px;
  left: 0;
  top: -15px;
  right: 0;
  bottom: 0;
  border: 1px solid #9C9819;
  -webkit-transform: rotate(45deg);
  -webkit-transition: border-color 0.3s;
  -moz-transform: rotate(45deg);
  -moz-transition: border-color 0.3s;
  transform: rotate(45deg);
}

<div class="diamond">
  <div class="diamond-inner">
    Test
  </div>
</div>

Also see: JSFiddle