Creating elements with special corners I've been given a task to create elements with some special corners, and those elements should be responsive.

This works, but am I wondering if something better could come up.
Less code to maintain.  

I wish NOT to use any CSS Preprocessor.  I prefer the more readable pure and simple CSS.

jsFiddle



&lt;div class="module-wrapper"&gt;
&lt;div class="title"&gt;
  &lt;div class="sub-module"&gt;  
      &lt;p class="title"&gt;
          Jump Session Outdoor Editon
      &lt;/p&gt;
  &lt;/div&gt;
&lt;/div&gt;    
&lt;div class="sub-module type"&gt;
    &lt;p&gt;Party&lt;/p&gt;
&lt;/div&gt;
&lt;div class="local"&gt;
  &lt;div class="sub-module"&gt;  
      &lt;p&gt;
          London
      &lt;/p&gt;
  &lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;


CSS:



p{
  margin: 0;
  padding: 0;
}

.module-wrapper {
    width: 20%;
    margin: 40px auto;
}

.sub-module {
  margin: 0 -5px;
}

.sub-module p {
    padding: 10px;
    color: white;
    text-align: center;
}

.type {
    background-color: red;
}

.local {
  background: black;
  padding-bottom: 5px;
}


.local p {
    background-color: black;
}

.title {
  background: green;
  padding-top: 5px;
}

.title p {
    background-color: green;
}
Yes, you can reduce your markup!  How small?  This small:

&lt;div class="module-wrapper"&gt;
  &lt;div class="title"&gt;Jump Session Outdoor Editon&lt;/div&gt;    
  &lt;div class="type"&gt;Party&lt;/div&gt;
  &lt;div class="locale"&gt;London&lt;/div&gt;
&lt;/div&gt;


How?  With pseudo elements.  http://codepen.io/cimmanon/pen/sIgju

.module-wrapper {
  width: 20%;
  margin: 40px auto;
  padding: 10px 0;
  color: white;
  text-align: center;
}
.module-wrapper:before, .module-wrapper:after {
  content: '';
  display: block;
  height: 10px;
}
.module-wrapper &gt; :first-child, .module-wrapper &gt; :last-child {
  position: relative;
}
.module-wrapper &gt; :first-child:before, .module-wrapper &gt; :last-child:after {
  content: '';
  display: block;
  background-color: inherit;
  height: 10px;
  position: absolute;
  left: 10px;
  right: 10px;
}
.module-wrapper &gt; :first-child:before {
  top: -10px;
}
.module-wrapper &gt; :last-child:after {
  bottom: -10px;
}
.module-wrapper div {
  padding: 15px;
}
.module-wrapper .title {
  background: green;
}
.module-wrapper .type {
  background-color: red;
}
.module-wrapper .locale {
  background: black;
}


Now I know you're convinced that you don't need a CSS Preprocessor because you're certain that vanilla CSS is more readable.  But what if you wanted to change the size of your corner cut-outs?  How do you know which value you need to change?  Here's the Sass I used to generate the above CSS:

$corner-width: 10px;
$corner-height: 10px;

.module-wrapper {
  width: 20%;
  margin: 40px auto;
  padding: 10px 0;
  color: white;
  text-align: center;

  // the pseudo elements here prevent us from having
  // to do the math on the parent element's margin
  // to ensure there's no overlap from preceding/
  // following elements
  &amp;:before, &amp;:after {
    content: '';
    display: block;
    height: $corner-height;
  }

  &gt; :first-child, &gt; :last-child {
    position: relative;
  }

  // this is where the illusion of the "corner"
  // happens
  &gt; :first-child:before, &gt; :last-child:after {
    content: '';
    display: block;
    background-color: inherit;
    height: $corner-height;
    position: absolute;
    left: $corner-width;
    right: $corner-width;
  }

  &gt; :first-child:before {
    top: -$corner-height;
  }

  &gt; :last-child:after {
    bottom: -$corner-height;
  }

  // pretty up our child elements
  div {
    padding: 15px;
  }

  .title {
    background: green;
  }

  .type {
    background-color: red;
  }

  .locale {
    background: black;
  }
}


With the use of variables, I only need to make 2 adjustments and everything is recalculated for me.  Since the padding on the child elements and the margin on the parent element is not using the variables, I know that I am free to change them without it affecting the corners.

I am almost certain you mean "locale" for your class name, not "local".

If your CSS goes away, does your content still make sense?  If not, then you may need something more to give it some context.  A table may be appropriate here.

If you ever have a class called "title", that's almost a sure sign that you should be using an h1-h6 element instead.